10 進数解析を使用してブラウザの互換性の問題を解決する相違点_html/css

HTML:

CSS:

結論:

概要:

ホームページ

ウェブフロントエンド

htmlチュートリアル

10 進数解析を使用してブラウザの互換性の問題を解決する相違点_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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 ハックを 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 ハックも削除されます。