浏览器的差异(css兼容问题集锦)
1.对于ul、ol列表缩进问题,css样式应写成ul,ol{list-style:none;margin:0;padding:0;}
其中margin对IE有效,padding对firefox有效。经验证,在IE中,仅通过margin:0;就可以去除上下左右缩进及空白、列表编号或圆点;而在firefox中,必须通过list-style:none;margin:0;padding:0;以达到相应效果。
2.css透明度问题
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
值得注意的是:在写样式时需要两个都写以兼容各个浏览器,并且opacity:0.6;写在下面
3.margin双边距问题
在设置float的div在IE下设置margin时会产生双边距,这是IE6的一个典型bug,其解决方法是加上display:inline;
4.div浮动IE文本会产生3pxbug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
其中样式为
<pre name="code" class="css">.box{width:800px;float:left;}
.left{width:50%;float:left;}
.right{width:50%;}
*html .left{margin-right:-3px;}
5.IE6下图片下方会产生间隙
解决办法是将图片设置为display:block;或者设置vertical-align:top bottom middle;
6.使文本在一行内显示,多余部分隐藏并以省略号结束
其样式为
width:200px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
7.使文本在多行内显示,多余部分隐藏并以省略号结束
其样式为
text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
8.怎么样使一个层垂直居中于浏览器中
使用百分比绝对定位与外补丁负值方法,负值的大小为其自身宽度高度除以二
div{
position: absolute;
top: 50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid #f00;
}
8.FF和IE(div居中问题)
在FF中使用margin-left:auto;margin-right:auto;即可使元素居中,但IE不行,IE需要设定body居中,首先在父级元素定义text-align:center;即在父级元素内的内容居中
9.链接a标签加上边框和背景需要添加样式
display:block;float:left; //保证是块元素的前提下不换行
10.万能float闭合
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
//:after(伪对象),设置在对象后发生的内容,同常和content配合使用,IE不支持此伪对象,非IE浏览器支持,所以并不影响到IE/WIN浏览器
11.为什么无法定义1px左右高度的容器,IE6下这个问题应该是默认行高造成的,解决方法
overflow:hidden; || zoom:0.08; || line-height:1px;
12.FF下给div加上padding后其宽度和高度均会有所增高,但IE不会,其解决办法就是给div设定IE、FF两个宽高,在IE宽高设置时,加上IE特有想标识*
13.css HACK标记(原理有两条,即兼容性和顺序)
所有浏览器通用: height:100px;
IE6专用:_height:100px;
IE7专用:*+height:100px;
IE6、IE7共用:*height:100px;
IE7、FF公用:height:100px !important;
14.行内属性标签,设置display:block;(除了input元素比较特殊)后采用float布局,又有横行的margin的情况,IE6间距bug
解决方案:在displsy:block;后面加display:inline;display:table;
15.多行文本垂直居中问题(兼容IE6,7)
方法一:
<div class="middle-box">
<div class="middle-inner">
<p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<p style="display:none;"><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
</div>
</div>
css:
.middle-box{display: table; height: 300px; border:1px solid #ff0000; width:400px; margin:0 auto; position:relative;}
.middle-inner{display: table-cell; vertical-align:middle; *position:absolute; *top:50%; *left:50%; width:100%; text-align:center;}
.middle-inner p{position:relative; *top:-50%; *left:-50%;}
方法二:
<div class="middle-box">
<p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<i class="visible"></i>
<p style="display:none;"><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
</div>
css:
.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }
.middle-box p{vertical-align: middle; display: inline-block; *display: inline; *zoom: 1;}
.visible{height: 100%; vertical-align: middle; width: 0; display: inline-block;}
css透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
利用display:table-cell进行等高布局。
html:
<div class="list_row">
<div class="list_cell"><img src="img/video-1.png"/></div>
<div class="list_cell list_center"><img src="img/video-3.png"/></div>
<div class="list_cell">奔波了一天,收到了无数的生日快乐,享受了电影见面会现场各种形式的祝福和礼物,以及场面宏大的生日快乐歌,感谢<西风烈>,感谢支持我的朋友们!现在机场举长寿面祝你们都永远幸福快乐! </div>
</div>
css样式表:(兼容IE6以上,其中margin-bottom:-100px.*padding-bottom:110px;*float:left;是为了兼容IE6/7才使用的)
.list_row{display:table-row; overflow:hidden;}
.list_cell{display:table-cell; width:30%; margin-bottom:-100px; padding:1.6%; *padding-bottom:110px; background-color:#f5f5f5; *float:left;}
.list_center{background-color:#f0f3f9;}
16、/*去掉各table cell的边距并让其边重合*/
table{
border-collapse:collapse;
border-spacing:0;
}
17.移动端字体设置
body{font-family:"Helvetica Neue",Helvetica.STHeiTi,sans-serif;}
18.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
Chrome
中文界面下默认会将小于12px 的文本强制按照12px 显示,可通过加入 CSS 属性-webkit-text-size-adjust: none;解决.