css 常见兼容性问题及解决方案
2014-07-06 19:35
357 查看
css 兼容问题一直是困扰前端开发人员的大难题,提到兼容性立马想到了万恶的ie6,说多了都是泪,还是整理一些常见的兼容性问题以及解决的方案吧。
一. 浮动元素双边距。
①条件:ie6下,如果给元素设置float,同时给float同一方向设置margin值,则ie6下表现出双倍的边距
② 代码:
.demo { background: #95cfef; border: 1px solid #36f; float: left; height: 100px; margin: 30px 0 0 30px; width: 300px; }
③浏览器表现
④ 解决方案
css hack 方式 在ie6下单独设置margin值,如_margin:15px 0 0 30px;
推荐给float元素添加display:inline 属性
二 . box-model 设置padding和border改变box的宽度
准确来讲这不是浏览器bug,只是很多时候可能我们经常会犯的错误,看下面的例子:
我们进行行一个960px的布局,里面左边栏是220px的宽度,主内容是720px的宽度,他们之间是20px的间距,此时设计需要在左边栏 有一个10px左右内距,多数情况下代码如下:
<div id="wrap"> <div id="left">left</div> <div id="content">main</div> </div>
css如下:
#wrap { width: 960px; background: #66CCFF } #left { background: #FFCC99; float: left; padding: 0 10px; width: 220px; } #right { background: #9933CC; float: right; width: 720px; }
而看看效果:
添加完padding值后,left和right之间的20px已经消失了, 原因呢则是 元素在网页中的宽度是width+padding-left+padding-right+border-left+border-right,(margin不算到box的宽度上,只是影响box和周围元素的距离),所以在网页中实际占宽是240px。
解决办法有两个,方案一是重新计算宽度,比如该例中:
#left { background: #FFCC99; float: left; padding: 0 10px; width: 200px; }
方案一的做法将元素的width和padding 设置在同一元素样式中,如果涉及到后期对于padding值有改动或者其他类似的需求的话,需要重新计算高度,多次修改,所以不推荐方案一。
方案二是在#left内部添加一元素,html示例如下:
<div id="wrap"> <div id="left"> <div class="innerLeft"> </div> </div> <div id="content">main</div> </div>
css代码:
#left{ width:220px; float:left; } #left .innerLeft{ padding:0 10px; }
这么做呢主要是width padding margin三权分立的写法,具体情况原理参考另一篇博文,《从div盒子模型谈如何写可维护的css代码》。
相关文章推荐
- 解决方案/DIV+CSS 在 IE7/IE6/Firefox间的兼容性问题 (转载)
- 解决方案/DIV+CSS 在 IE7/IE6/Firefox间的兼容性问题
- CSS常见兼容性问题总结
- CSS在IE浏览与Firefox间最常见的不兼容性问题
- IE兼容性问题解决方案3--css中的overflow
- CSS常见兼容性问题总结
- 常见兼容性问题及解决方案
- CSS在IE浏览与Firefox间最常见的不兼容性问题
- CSS在IE浏览与Firefox间最常见的不兼容性问题
- CSS常见兼容性问题总结
- W3C对于CSS及浏览器之间的兼容性问题解决方案
- CSS常见兼容性问题
- 常见的CSS兼容性问题。
- DIV-CSS兼容性常见前端问题总结
- CSS 常见问题和解决方案
- div+css兼容性问题与解决方案
- 2013年度最新整理45个div+css兼容性问题与解决方案
- css中元素居中显示的常见问题及解决方案
- CSS常见兼容性问题总结
- IE浏览器常见CSS兼容性问题及解决办法