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％问题

回答

相关问题