HR幅100％の問題

コンテンツの幅を画面境界に制限する方法を教えてください。次のスクリプトでは、常に2px幅が画面（許容されるスペース）幅よりも広くなります。HR幅100％の問題

document.body.scrollWidthは常に2ピクセルの画面

私は問題は、ブラウザの時間を構築するために1つのピクセルの境界線を追加していることを信じ

<html> 
<head> 
    <style> 
     * {margin: 0; padding: 0} 
    </style> 
    <script type="text/javascript"> 
     function test(){ 
      alert(document.body.scrollWidth); 
      alert(document.getElementById("hrtest").scrollWidth); 
      alert(document.getElementById("divtest").scrollWidth); 
      alert(screen.width); 
     } 
    </script> 
</head> 
<body onLoad="test()"> 
    <div id="divtest"> 
     <hr size="2" width="100%" id="hrtest" /> 
    </div> 
</body> 
</html>

出典

2012-03-12 awattar

なぜすべてで幅を指定？ – Oded

hr { 
    border-right : 0; 
    border-left: 0; 
}

する必要があります。スタイルに重要な要素を追加したり、文書内のすべてのhrを繰り返したり、インラインスタイルを設定することができます。

出典

2012-03-15 07:51:52 Furmek

よりも広くなっています。クロムとの時間を検査する私たちのすべての時間のようにデフォルトで適用される次のスタイルを示していますborder-width: 1px;が期待される結果が得られます無効

display: block; 
-webkit-margin-before: 0.5em; 
-webkit-margin-after: 0.5em; 
-webkit-margin-start: auto; 
-webkit-margin-end: auto; 
border-style: inset; 
border-width: 1px;

が、時間が非表示になります。とにかく、hrの幅を削除します。P

出典

2012-03-12 19:52:52 scumah

はい、これはInternet Explorerの1ピクセル境界に問題があります。両側に1ピクセルずつ追加すると2ピクセルの差異が生じます。これは、適切なボックスモデルに従うブラウザでは問題にはなりません。 Firefoxなど – user17753

@ user1169578、よく、幅を100％から1時間に設定すると、IEだけでなくChromeやFirefoxでもページ幅を超えます。私の答えで言ったように、私はChromeでそれをテストし、水平スクロールバーになりました：P – scumah

私はFFでスクロールバーを持っていません。私は、コードを実行し、出力集計：IEで1680：FF中：ボディ幅：1680 時間幅：1680 divの幅：1680 画面の幅をボディ幅：1003 時間幅：1001 divの幅：1003 画面の幅：1680 – user17753

境界線の幅を0に設定するとこれが解決されます。

http://jsfiddle.net/chuckplayer/AuC8b/

* {margin: 0; padding: 0; border: 0} 


    <div id="divtest" width="100%"> 
     <hr size="2" width="100%" id="hrtest" /> 
    </div> 

    alert(document.body.scrollWidth); 
      alert(document.getElementById("hrtest").scrollWidth); 
      alert(document.getElementById("divtest").scrollWidth);

出典

2012-03-12 19:58:06 Chuck

あなたは本当に<hr>がbodyの正確な幅を一致させたい場合、私は<hr>の境界線スタイルを隠し、height: 1pxでbackground-colorを使用することをお勧めします。 http://jsfiddle.net/helpinspireme/fg6Mp/3/

CSS

hr{ 
    border-style: none; 
    background: #000; 
    height: 1px;}

jQueryの

var body_width = $('body').width(); 
var div_width = $('div').width(); 
var hr_width = $('hr').width(); 
alert(body_width); 
alert(div_width); 
alert(hr_width);

HTML

<div> 
    <hr/> 
</div>

：あなたはここにコードを表示することができます

出典

2012-03-12 20:12:18

古いバージョンのブラウザでは、 'font-size：0'と' line-height：0'を設定して、 '

'要素に与えられたデフォルトの高さを削除する必要があります。 –

（水平線）のデフォルトのユーザーエージェントスタイルシートHTML 要素は次のとおりです。

hr { 
    display: block; 
    -webkit-margin-before: 0.5em; 
    -webkit-margin-after: 0.5em; 
    -webkit-margin-start: auto; 
    -webkit-margin-end: auto; 
    border-style: inset; 
    border-width: 1px; 
}

あなたは、HTML文書全体に水平方向のスクロールを修正したい場合は、解決策に従ってください：

溶液＃1：

hr{ 
width: 100%; 
box-sizing: border-box; 
}

溶液＃2：

hr{ 
width: 100%; 
border-left: 0px; 
border-right: 0px; 
}

出典

2015-06-28 21:47:24

答えて

関連する問題