27个web前端兼容性及经验汇总

1.浮动时，父级元素无法撑开

解决方案： 全局增加样式

.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}

父级元素调用clearfix

2.IE6 div浮动时，margin双倍边距bug

解决方案：为浮动的div加上display:inline;

3.IE6及早期版本 无法直接定义较小高度的容器+

原因：就算容器里什么都没有也会有行高

解决方案：font-size:0;line-height:0;overflow:hidden;

4.IE6 span a等行内元素空格或者回车出现3像素空隙+

有空隙 有空隙 有空隙

没有空隙没有空隙没有空隙

解决方案：1、写成一行。将父级标签font-size初始化为0，然后重新设置元素的字体大小。

5.IE7及以下版本 两个以上li浮动，li之间出现空白间隙bug+

解决方案：li{vertical-align:top;}

6.IE6 li内，定义display:block的内联元素底部产生空白+

解决方案： 给li内的内联元素，加上zoom:1

7.IE6 模拟min-height效果+

解决方案：min-height:100px;_height:100px;

8.IE6 文本溢出，多出一个文字BUG+

原因：浮动，注释，宽高定义

解决方案：删除出现bug的元素之间的注释

9.使用滤镜PNG图片透明后，容器内链接失效+

原因：浮动，注释，宽高定义

解决方案：为容器里面的a加个_position:relative样式

10.IE6 无法识别伪对象:first-letter/:first-line+

解决方案： 选择符与“{”之间增加空格，或者换行。

11.IE6 忽略同一条样式体内的!important规则+

解决方案： 将该样式拆分为2条，!important单独书写

12.IE7及以下版本 元素设置了position:relative;相对定位，父级元素overflow:auto|hidden失效+

解决方案： 给父级元素增加position:relative

13.img图片下方出现几个像素间隙+

解决方案： img{display:block;}或者img{vertical-align:top;} 在或者 img{font-size:0}

14.如何让文本垂直对齐文本输入框？+

解决方案： input{vertical-align:middle;}

15.如何让单行文本在容器内垂直居中？+

解决方案： 设置文本的行高等于容器的高度。举例：height:25px;line-height:25px;

16.IE下 如何设置滚动条的颜色+

解决方案：定义html标签

html{

scrollbar-3dlight-color:#999;

scrollbar-darkshadow-color:#999;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eee;

scrollbar-arrow-color:#000;

scrollbar-face-color:#ddd;

scrollbar-track-color:#eee;

scrollbar-base-color:#ddd;

}

17.强制文本溢出一行显示+

解决方案： 设置容器的宽度和white-space:nowrap

18.如何使文本溢出边界显示为省略号+

解决方案： 设置容器宽度，设置文本一行显示，溢出截断并显示省略号。例子：

.test {width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

19.IE下 iframe背景透明+

解决方案： 设置iframe元素的标签属性allowtransparency=”allowtransparency”然后设置iframe内部页面的body背景色为transparent。引发的问题：设置透明后的iframe将不能遮住select

20.各个浏览器 opacity透明问题+

.test {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;}

21.IE6下 png背景透明+

解决方案： 调用DD_belatedPNG_0.0.8a-min.js插件

<!–[if IE 6]>

<script type=”text/javascript” src=”http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js” ></script>

<script>DD_belatedPNG.fix(‘.pngfix,.icon’);</script>

<![endif]–>

22.让连续的长字符串自动换行+

解决方案： word-wrap:break-word;

23.去掉超链接的虚线框+

解决方案：

a {

outline:none;

blr:expression(this.onFocus=this.blur());

}

24.网页水平居中-

解决方案：

body{text-align:center;} .wp{width:980px;margin:0 auto;text-align:left;}

25.如何让table边框1个像素细

解决方案：

table{border-collapse:collapse;}

table th,table td{border:1px solid #ddd;}

26.网页去色，让网站显示灰色

解决方案：

*{filter:gray; color:gray;}

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

27.两个相邻块级元素，都设置了margin，间距只有最大一个，间距不会相加。

解决方案：

原因： 这种现象叫：“外边距合并”，两间距相邻取大。 此现象也出现在父子元素。

注意： 浮动元素和绝对定位元素，不会和相邻的元素产生外边距合并；内联块级元素间不会产生外边距合并；根元素间不会产生外边距合并（如html与body间）；设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并。

未经允许不得转载：爱前端网 » 27个web前端兼容性及经验汇总