其它 媒体动画 电脑基础 硬件教程 网络安全
#content { width:530px; //这个是错误的width,所有浏览器都读到了 voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容 voice-family:inherit; width:500px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的 } html>body #content { //html>body是CSS2的写法 width:500px; //支持CSS2该写法的浏览器有幸读到了这一句,IE 5.x不支持的。 }
#content { width:500px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值 width(空格)/**/:530px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用 } html>body #content { //html>body是CSS2的写法 width:500px; //支持CSS2该写法的浏览器有幸读到了这一句 }
<!--[if Lte IE6]> #content { width:530px } <[!endif]-->
这里是浮动box
左边对象是浮动的,这里是采用margin-left来定位,这里的文本会离左边有3px的空白误差。
左边对象是浮动的,这里是采用* html p.no3px{height:1%;margin-left: 0;},这里的文本会离左边没有了3px的空白误差。
IE/div浮动文本出现3px间距的bug产生的条件: 当左边对象是浮动的,右边对象采用外补丁的左边距(margin-left:?px;)来定位,则右边对象内的文本会离左边有3px的空白误差。
#ie3px{float: left; width: 100px; height: 50px; background: #f60;}/*左边对象浮动*/ p.ie3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;}/*右边margin-left:??px;*/
<div id="ie3px">这里是浮动box</div> <p class="ie3px">左边对象是浮动的,这里是采用margin-left来定位,这里的文本会离左边有3px的空白误差。</p>
IE/div浮动文本出现3px间距的bug解决方法: 利用hack *html div{}为IE单独写一个样式
* html #ieno3px{margin-right:-3px;} * html p.no3px{height:1%;margin-left: 0;}
#ieno3px{float: left; width: 100px; height: 50px; background: #f60;} p.no3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;} * html #ieno3px{margin-right:-3px;} * html p.no3px{height:1%;margin-left: 0;}
<div id="ieno3px">这里是浮动box,使用了<span class="alt">* html #floatbox2 {margin-right: -3px;}</span>解决3px bug</div> <p class="no3px">左边对象是浮动的,这里是采用<span class="alt">* html p.no3px{height:1%;margin-left: 0;}</span>,这里的文本会离左边没有了3px的空白误差。</p>
#box1{ margin-left:50px; float:left; background:#f60; width:200px;}
<div class="wrap"> <div id="box1">这个元素,浮动左对齐(float:left),左侧外补丁(margin-left:50px;),在wrap层内,但在IE浏览器中Box1离左边的距离会是100px,而实际距离应是50px。当一个元素用于非float:none;的浮动状态时,IE下该元素既被视为块级元素,display:block; </div> </div>
#box2{ margin-left:50px; float:left; background:#f60; width:200px; display:inline ;}
<div class="wrap"> <div id="box2">这是个拥有正确margin-left的元素,解决的办法就是,使浮动效果消失,这里采用了display:inline;原理可参阅on having layout。</div> </div>
一个老外弄的Clearing floats(清除浮动的方法)
在iframe中隐藏横向滚动条的方法大全
css+table 1px边框单元格
CSS样式表的背景渲染效率
Firefox2中输入框丢失光标bug的解决方法
做网页中需要掌握的八个CSS布局技巧
用CSS给图片打标的代码
css为图片设置背景图片
div做细线表格,很强悍
不要使用CSS Expression的原因分析
最新评论