IE6下table:100%以后溢出

大致是这样子的结构:

<div style="height:100px;overflow-y:auto">
<table style="width:100%;height:auto"></table>
</div>

然后在IE6里面又被发脾气了,table不会被高度约束啊,想想应该是width:100%把IE layout又被触发了。

解决办法:在table外面包一层layout

如:

<div style="height:100px;overflow-y:auto">
<div style="+zoom:1">
<table style="width:100%;height:auto"></table>
</div>
</div>

IE6,7的table不能跟随着滚动条滚动的解决办法

最近遇见了一个很奇怪的问题,大致如下面结构:

<div style="overflow-y:auto;width:100px;height:100px;">
<table style="width:100%;height:auto;"></table>
</div>

然后吧移动滚动条就发现IE6,7里面的table并不会随着一起动,这个时候table就像定在了那里一样。事实是确实是定在了那里。

不知道触动了IE6,7的哪根神经,它定在了那里,这个时候就把它当做absolute处理,将父级div加上一个position:relative就可以动了。

IE 6 position不支持fixed属性的解决方案

IE7已经支持position:fixed了,而IE6却不支持,解决这个问题的办法如下:
现在有一个元素的id是element,它需要实现fixed效果,我们既想要它在正常的浏览器下使用,也想要它在IE 6下正常工作,那么可以使用CSS hack:
#element {
position: fixed;
top: 450px; /* 其他浏览器下定位,在这里可设置坐标*/
_position: absolute; /*IE6 用absolute模拟fixed*/
/*IE6 动态设置top位置*/
_top: expression(eval(document.documentElement.scrollTop) +  450); 
}
这样就可以实现这个元素距离顶部450像素固定,你还可以添加下面的代码来实现去除页面抖动的效果:
*html body{
background-image:url(about:blank);
background-attachment:fixed;
}
如果你想要改变expression的内容,请查看博文《js、jQuery修改CSS中expression()的方法》。

IE6、IE7下text-indent和display:inline-block的问题

        在做项目的时候常常有这样的问题,一个a标签或是input需要用背景图片显示,但是又因为seo的原因,a标签里面要写字而且不能显示出来,所以要用到text-indent:-999em;direction:ltr;overflow:hidden;同时会设置a标签为inline-block,在其他浏览器下面都不会有问题,但是ie6和ie7下面整个图片都会直接消失了,因为ie6和ie7同时使用text-indent和display:inline-block会有问题,解决方法是将a设置为display:block;或是将a浮动,或者给a定位等

下面给出具体例子:

css代码

.head{
width:106px;
padding:20px;
margin:0 auto;
border:1px solid #000;
}

.logo{
background:url(images/logo.jpg) no-repeat;
width:106px;
height:42px;
display:inline-block;
text-indent:-999em;
overflow:hidden;
direction:ltr;
}

html结构

<div class="head"><a class="logo" href="#">logo</a></div>

firefox下截图                               ie6下截图,图片消失不见了

         

修改过的css代码

.logo{
background:url(images/logo.jpg) no-repeat;
width:106px;
height:42px;
display:block;/*float:left;*/
text-indent:-999em;
overflow:hidden;
direction:ltr;
}

firefox下截图                               ie6下截图

         

CSS Hack兼容IE6+IE7+IE8

    一般来说,正确的CSS应该在任何支持CSS的浏览器里工作良好,但不幸的是浏览器们布满了BUG和不一致。创建一个跨浏览器并且显示一致的页面,CSS开发者必须想尽办法。通过使用BUG和未实现的CSS,开发者就能够为不同的浏览器应用不同的规则。HACK是开发者强有力的武器,了解各种常用的HACKS以及它们如何工作,是件重要的事。
    CSS hack是一种代码,用来根据浏览器类型,版本号显示或隐藏CSS标签。浏览器们对CSS行为有不同的解释,对W3C标准的支持程度也不相同。CSS 过滤器经常用于在多个浏览器中实现一致的布局外观,因为某些浏览器无法渲染。HACK(黑客)这样的称呼多少有点消极,实质上属于个人对CSS代码非官方的修改,误导人们以为还有更好的方法达到目的,但其实我们没有,有的人喜欢用patch(补丁)来称呼它,这样人们就能知道这本是浏览器造成的错误。
    以下代码是能够在IE浏览器下解决6、7、8兼容性问题的:
selector{
property:value; /* 所有浏览器 */
property:value\9; /* 所有IE浏览器 */
property:value\0; /* IE8 */
*property:value; /* IE7、IE6 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/?p=853