利用小数解析差异解决浏览器兼容性问题_html/css_WEB-ITnose
Jun 21, 2016 am 08:59 AM
通常我们写 css 的时候写的数字都是整数,如 font-size:12px; margin:20px;那么看到标题可能有人会问,css 属性值可以有小数点么?如果是小数那会显示成什么样子?和整数有什么区别?
首先我们先看个例子,通过例子来观察下小数在各个浏览器的差异。
Html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"/> <meta name="keywords" content=""/> <meta name="description" content=""/> <title>小数点在各个浏览器中的差异</title> <link rel="stylesheet" href="css/main.css"/></head><body> <div class="demo"> <p class="font15-9">这段文字的大小是15.9像素。</p> <p class="font16">这段文字的大小是16像素。</p> <p class="font14-4">这段文字的大小是14.4像素。</p> <p class="font14">这段文字的大小是14像素。</p> </div></body></html>
登入後複製
Css:
@charset "utf-8";@import "core/config";@import "core/reset";.demo { margin:50px; font-family:SimSun; p { height:30px; margin:20px; } .font15-9 { font-size:15.9px; } .font16 { font-size:16px; } .font14-4 { font-size:14.4px; } .font14 { font-size:14px; }}
登入後複製
结论:
我们可以看出在 chrome/firefox/ie8-11 下小数会通过四舍五入的方式转成整数,而 ie6/ie7 会对小数进行下限取整转成整数。通过这一特性我们在某些情况下,用小数来替代 css hack。譬如:
Html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"/> <meta name="keywords" content=""/> <meta name="description" content=""/> <title>小数点在各个浏览器中的差异</title> <link rel="stylesheet" href="css/main.css"/></head><body> <div class="demo"> <div class="black"> <div class="red"></div> <p>在 ie6/ie7 下红色块离黑色块没有外边距,而其他的浏览器则有 1px 外边距。一般我们是写 css hack,如 margin:1px;*margin:0; 但是我们现在可以通过小数来解决啦。</p> </div> </div></body></html>
登入後複製
Css:
@charset "utf-8";@import "core/config";@import "core/reset";@import "core/common";.demo { margin:50px; font-size:30px; font-family:SimSun; .black { overflow:hidden; width:500px; height:500px; @include center-block; background-color:#000; color:#fff; } .red { width:100px; height:100px; margin:1.1px; background-color:#f00; }}
登入後複製
不仅仅缩短的代码的长度,还去掉了 css hack。
总结:
虽说这个小数解决一些兼容性问题很神奇,但是它的缺点也很明显,就是适用范围,只能解决 相差 1 像素的浏览器差异, 而且只能解决 ie6/ie7 下 1 像素的差异。
测试浏览器:chrome/firefox/ie6-11
参考资料: 鲜为人知的一个解决兼容性问题的利器——小数
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼?

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?
