开发杂记:chrome下只用做background的td标签width-height偏差

by kevin 3. 六月 2013 13:54 >
这几天,在写CSS的时候,碰到两个问题。 1. 对chrome下只用做background的td标签height设置为5px,但实际显示的效果是6px。 解决的方法是:在td内添加一个div,设置div的height为5px; 原始代码: 1: <td class="top" colspan="6"></td> 2: <style> 3: .top {width: 1183px; padding: 0px; height:5px; background-image: url(/Content/Image/UI/Order/myorder_top.png); background-repeat: no-repeat; } 4: </style>   改进后: 1: <td class="top" colspan="6"> 2: <div class="topContent"></div> 3: </td> 4: <style> 5: .top {width: 1183px; padding: 0px; height: 5px;} 6: #myOrder .item .top { height: 5px \9;} /*ie8*/ 7: .topContent {padding: 0px;height: 5px; background-image: url(/Content/Image/UI/Order/myorder_top.png); background-repeat: no-repeat; } 8: </style>   2. 对chrome下只用做background的td标签height设置为5px,但实际显示的效果是6px。 解决的方法是:利用webkit的css hack,将width设置为4px. 原始代码: 1: #myOrder .item .right { width: 5px; padding: 0px;background-image: url(/Content/Image/UI/Order/myorder_left.png); background-repeat: repeat-y;} 改进后: 1: #myOrder .item .right { width: 5px; padding: 0px;background-image: url(/Content/Image/UI/Order/myorder_left.png); background-repeat: repeat-y;} 2: @media screen and (-webkit-min-device-pixel-ratio:0){#myOrder .item .right{ width: 4px; } }   width偏差的原因:google了下,说是自动表格布局下,各个浏览器对最小单元格宽度(MCW)的表现不一样。猜想height偏差估计也是相同的道理。 参考资料: 自动表格布局:http://www.w3.org/TR/CSS21/tables.html#auto-table-layout width偏差:http://w3help.org/zh-cn/causes/RE8018          http://w3help.org/zh-cn/causes/RE9019

打赏请我喝果汁咯

支付宝 微信

关于我

80后,单身,平庸的程序员。

喜欢看书,乐于交友,向往旅游。

遇建Kevin

FluentData交流群:477926269

Fluentdata