HR寬度100％問題

你能告訴我如何限制內容寬度到屏幕邊界嗎？對於以下腳本，我總是獲得比屏幕（允許的空間）寬度寬2px的寬度。HR寬度100％問題

document.body.scrollWidth總是比2px的屏幕

<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 2012-03-12 19:43:48

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

應該這樣做。您可能希望增加樣式的重要性，或遍歷文檔中的所有hr並設置內聯樣式。

來源

2012-03-15 07:51:52 Furmek

我認爲這個問題是在瀏覽器中添加1個像素邊框打造小時更寬。檢查與鍍鉻小時向我們展示了在默認情況下適用於所有人力資源的以下類型：

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;

禁用border-width: 1px;會產生預期的結果，但隱藏小時。無論如何，刪除小時寬度的作品：P

來源

2012-03-12 19:52:52 scumah

是的，這是Internet Explorer中1px邊框的問題。每邊1px增加了2px的差異。這是在遵守正確的盒模型瀏覽器一個不是問題的問題，例如Firefox等 – user17753 2012-03-12 19:56:09

@ user1169578，那麼，寬度爲100％設定爲一個小時時，其超過在鉻和Firefox頁面寬度爲好，不僅在IE中。正如我在答覆中說，我測試了它在Chrome中，它導致了水平滾動條：P – scumah 2012-03-12 19:59:46

我在FF沒有滾動條。我剛剛運行的代碼和相吻合的輸出：在FF：身寬度：1680 小時寬度：1680 DIV寬度：1680 屏幕寬度：1680在IE：身寬度：1003 小時寬度：1001 DIV寬度：1003 屏幕寬度：1680 – user17753 2012-03-12 20:15:47

將邊框寬度設置爲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>的邊框樣式和使用background-color有height: 1px。您可以查看這裏的代碼：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'來移除給予'

'元素的任何默認高度。 – 2012-03-12 20:14:50

爲

（水平線）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

HR寬度100％問題

回答

相關問題