1、只有IE7能识别的形式:*+height:100px;
在css style中加注释:
css {
/* height:100px; */
}
2、IE7 line-height的问题
去掉line-height 和 height
用*+padding的方式实现垂直居中。
3、IE6 line-height失效
当元素内包括span、img、input等元素时失效。如:<div style="height:2px;line-height:26px;"><input style="height:20px;"/></div>
解决方法:在非文本对象上加上margin:(div高度-input高度或默认高度)/2 0; // 即:margin:3px 0px; 测试:适度修改margin的各值后可以兼容。
最好的办法:position:relative/absolute; top: 50%;margin-top: -height/2;居中也可以用百分之五十和一半宽度设置。
4、关于float:right; 在IE6下位置出错,方法:对位于左边的span进行margin:0;清除。
<span style="float:right;"></span><span></span>
5、png图片在IE6下显示。【但不能解决透明部分的显示。(待测试)】
应写上background和filter,且为background。不是background-image。可能后面的filter是针对整个background滤镜,包括了背景的每个方面。
正确1?:
background: url(../../Images/FMM/max-enabled.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/FMM/max-enabled.png',sizingMethod="crop");
正确2:
#Site {
_ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/logo.png');
_background-image: none; /*包括这一行内容*/
}
错误:
background-image: url(../../Images/FMM/max-enabled.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/FMM/max-enabled.png',sizingMethod="crop");
说明:
Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是有一定的意义。
enabled | : | 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
| |||||||||
sizingMethod | : | 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
| |||||||||
src | : | 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。 |
Enabled | : | 可读写。布尔值(Boolean)。参阅 enabled 属性。 |
sizingMethod | : | 可读写。字符串(String)。参阅 sizingMethod 属性。 |
src | : | 可读写。字符串(String)。参阅 src 属性。 |
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
8、IE6 float:right; 会换行
解决:float:right; 的元素先写。其他元素后写。交换html顺序。未测试。
或者对其_margin:-px;
9、 margin-top:-1px;在IE6下不起作用,不能遮盖层,形成tab标签切换形式。
解决: 修改height、line-height的值,对于li标签页加上:_position: relative;
margin为负值,在IE中出现问题。
解决:加上position: relative;zoom:1;
10、firefox rowspan的问题
rowspan出现一条线
在出现问题的地方前面或后面加上<tr></tr>
11、
当五个图片并排显示,间隔相同,整体div又居中,左边左对齐,右边右对齐。解决方案:
每个图片占的区域宽度固定,大于图片本身宽度,把其右侧的宽度加起来。最后一个宽度只有图片大小。
12、ie中,a固定宽度。多个a排列。问题:不对齐。解决办法:a标签之间无空格。在html中写的方式:<a href=""></a><a href=""></a>。
13、firefox不能获取:$.css("lineHeight")已经设置的lineheight(不知道写法是否有问题),只能获取默认的input高度。line-height在ff中起作用。
解决方法:对于ff——不给元素设置高度。只设置padding-top和padding-bottom。
写法:
.txtInput { margin-top: 10px; }
@-moz-document url-prefix() {.txtInput { margin-top: 20px; }}
14、对于页面层多的布局,不要轻易使用position : relative; 定位。会对float元素造成影响,对其他定位的元素也造成影响。
特别注意对于兼容其他浏览器垂直居中元素用到:position:relative;top:50%;margin-top: -px;也会受到影响,导致层布局错。因为也用到了position定位。
快速解决方法:position:static。把受到影响的relative元素用static再定义一次。
15、IE6下面布局宽度,可能是内存设置display:block; 应该改为display:inline-block;
IE6布局不显示内容:可能是zoom:1;未加上,没有触发布局。或者是clearfix没有写正确。
IE6下面jquery的toggle出现问题,两个toggle之间互相影响。解决办法:在两个之间加上<br />这样的间隔。