ホームページ >ウェブフロントエンド >htmlチュートリアル >10 進数解析を使用してブラウザの互換性の問題を解決する相違点_html/css_WEB-ITnose
10 進数解析を使用してブラウザの互換性の問題を解決する相違点_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:59:291210ブラウズ
通常、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 ハックを 10 進数に置き換えることができます。例:
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 ハックも削除されます。
概要:
この 10 進数は互換性の問題を解決するのに魔法のように役立ちますが、その欠点も明らかです。つまり、アプリケーションの範囲ではブラウザーの 1 ピクセルの違いしか解決できず、解決できるのは 1 ピクセルのブラウザーの違いだけです。 ie6/ie7 での 1 ピクセルの違いを解決します。
テストブラウザ: chrome/firefox/ie6-11
参考: 互換性の問題を解決するためのあまり知られていないツール - 小数点
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。