css-hack-不同浏览器

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而言还是有一定的意义。

语法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

属性：

enabled	:	可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true :　 默认值。滤镜激活。 false :　 滤镜被禁止。
sizingMethod	:	可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop :　 剪切图片以适应对象尺寸。 image :　 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale :　 缩放图片以适应对象的尺寸边界。
src	:	必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

特性：

Enabled	:	可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod	:	可读写。字符串(String)。参阅 sizingMethod 属性。
src	:	可读写。字符串(String)。参阅 src 属性。

说明：

在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。

PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

6、div高度设置为2px，高度远大于2px的解决办法：

因为IE6对div内容有默认高度，行高，字体高度。

加上： _line-height:0px;_font-size:0px;

7、height:auto; min-height

ie6不支持min-height、height:auto

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 />这样的间隔。