开发杂记:如何处理google chrome最小字号的问题

by kevin 16. 十二月 2013 14:15 >
最近在改版65emall的时候,碰到一个很棘手的问题,Chrome浏览器有个最小字号设置,就是当字号小于最小字号时,就会自动调整为自动调整为最小的字号。如下图: 在中文版的Chrome中,默认的最小字号是12; 在英文版的Chrome中,默认的最小字号是10。 1: -webkit-text-size-adjust:none; 网上很多都建议使用上面这样的语法来实现,但在高版本的Chrome中,这个语法已经无效了。 所以使用 -webkit-transform: 代码如下: 1: .font-size8 { font-size: 8px;} 2: .font-size9 {font-size: 9px;} 3: .font-size10 {font-size: 10px;} 4: @media screen and (-webkit-min-device-pixel-ratio:0) { 5: .font-size8 { 6: font-size: 12px; 7: margin-top: 1px; 8: -webkit-transform: scale(0.83); 9: } 10: .font-size9 { 11: font-size: 12px; 12: margin-top: 2px; 13: -webkit-transform: scale(0.86); 14: } 15: .font-size10 { 16: font-size: 12px; 17: margin-top: 2px; 18: -webkit-transform: scale(0.92); 19: } 20: } 注意一下 为了能同时兼容中英文Chrome,10号,11号也要这样缩小 这个比例不是简单的等比例缩小,比如9号字,的缩放比例就不是0.75 另外需要注意的一点是,长度,高度,还是会按照10或者12号字来计算,所以,最好在外层在加个div作为容器。 1: <div> 2: <div class="font-size9">font-size:9px</div> 3: </div>

开发杂记:让小于12号的字在google chrome中显示

by kevin 8. 十一月 2013 13:40 >
做为一个非专业的Css编写人员,一不小心,就可以踩到坑。 觉得小于12号的字不利于阅读,所以google chrome小于12号的字,都会被修正为12号。 google了下,据说,随着浏览器版本的升级,处理的方案还不一样。 整体的代码如下: 1: * { 2: -webkit-text-size-adjust: none; 3: -webkit-transform-origin-x: 0; 4: -webkit-transform: scale(0.8333333333333334); /* 10/12=0.8333333333333334) */ 5: }

开发杂记: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