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前端兼容性及经验汇总

赞 (0) 打赏

评论 0

评论前必须登录!

登陆 注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏