Javascript 人力资源宽度100%问题_Javascript_Html

Javascript 人力资源宽度100%问题

javascript html

Javascript 人力资源宽度100%问题,javascript,html,Javascript,Html,您能告诉我如何将内容宽度限制到屏幕边界吗？对于下面的脚本，我总是得到比屏幕（允许的空间）宽度宽2倍的宽度 document.body.scrollWidth始终比屏幕宽2倍 <html> <head> <style> * {margin: 0; padding: 0} </style> <script type="text/javascript"> function test(){

您能告诉我如何将内容宽度限制到屏幕边界吗？对于下面的脚本，我总是得到比屏幕（允许的空间）宽度宽2倍的宽度

document.body.scrollWidth始终比屏幕宽2倍

<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>


*{边距：0；填充：0}
功能测试（）{
警报（document.body.scrollWidth）；
警报（document.getElementById（“hrtest”）.scrollWidth）；
警报（document.getElementById（“divtest”）.scrollWidth）；
警报（屏幕宽度）；
}

我认为问题在于浏览器添加了一个1像素的边框来构建hr。使用chrome检查人力资源时，我们会看到默认情况下应用于所有人力资源的以下样式：

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;

禁用

边框宽度：1px将给出预期结果，但隐藏hr。无论如何，删除hr的宽度是有效的：P
将边框宽度设置为0将解决此问题

*{margin:0；padding:0；border:0}
如果您确实希望
与主体的确切宽度相匹配，那么我建议隐藏
的边框样式，并使用背景色
和高度：1px
。您可以在此处查看代码：
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>





我应该这样做。
您可能希望向样式中添加重要内容，或者遍历文档中的所有hr并设置行内样式
（水平线）HTML的默认用户代理样式表
要素是：
如果要修复HTML文档中的水平滚动，请遵循以下解决方案：
解决方案#1:
hr{
width: 100%;
box-sizing: border-box;
}

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

解决方案#2:
hr{
width: 100%;
box-sizing: border-box;
}

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

使用以下表格：
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
    <!-- your htlm block -->
</td></tr>
<tr><td style="border-bottom: 1px solid black;" height="50">
</td></tr>
</table>



您可以调整行的高度或使用边框顶部，每次需要hr时，请在表中添加此行
是的，这是Internet Explorer中1px边框的问题。每侧各1px表示2px差异。这在遵循适当的框模型的浏览器中是没有问题的，例如Firefox等@user1169578，当将宽度设置为100%时，它超过了Chrome和Firefox中的页面宽度，不仅仅是IE。正如我在回答中所说，我在Chrome中测试了它，结果是一个水平滚动条：PI在FF中没有滚动条。我刚刚运行了代码并计算了输出：在FF:body width:1680 hr width:1680 div width:1680 screen width:1680 IE:body width:1003 hr width:1001 div width:1003 screen width:1680你知道有任何其他类似的元素吗？是的，我的错，FF工作得很好。不过，Chrome没有。埃德：嗯，我现在想不出任何元素，但是任何元素（例如一个简单的div），宽度为100%，边框为1px，都是一样的。无论如何，这不是默认情况，您需要添加1px边框。另外请注意，对于较旧的浏览器，您需要设置字体大小：0
和行高：0
，以删除指定给元素的任何默认高度。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
    <!-- your htlm block -->
</td></tr>
<tr><td style="border-bottom: 1px solid black;" height="50">
</td></tr>
</table>