Question

我正在设计一个网站设计，但我遇到了一个错误......

html元素的固定宽度为800px，无论我尝试什么，身体元素ID“page”都不会占用100％的宽度？

继承代码......

<html>
<body id="page" >
    / content /
</body>
</html>


html {
    width: 800px;
    margin:0;
    padding:0;
}

#page {

}

我已经尝试将#page设置为'width：800px'，'width：100％'，'margin：0'，'margin：0 auto'等等，但无论什么总是有1px的差距#page的右侧。我甚至试过设置'宽度：801px'哪个不起作用，以及将相对位置设置为1px以防万一它因为某些原因而溢出，但它不是......

我错过了一些愚蠢的东西，我正在使用越野车的程序，还是其他的东西？我来自哪里，800px与800px相同，所以发生了什么？

谢谢你们......

编辑：因此，回顾之前的项目，我发现了什么对我有用。无论是我正在使用的程序（免费），还是我错过的东西，这对我有用，因此解决了我的问题。

<html>
<body>
/ content /
</body>
</html>

html {
    width: 800px;
}

body {
    margin: 0;
}

Answer 1

可能还有一些额外的css在某个地方潜行。检查#page元素上的任何border属性。

运行此代码段，不应该是单个像素间隙。

＆＃13;

html {
  width: 800px;
  background: lightgrey;
}

#page {
  margin: 0;
  border: none;
  background: yellow;
}

＆＃13;

<html>

<body id="page">
  / content /
</body>

</html>

＆＃13;

Answer 2

看起来您在浏览器将滚动条注入页面的方式中遇到了不一致问题，请参阅此处：

Styling the `<html>` element in CSS?

我首先使用像normalize.css这样的css重置来获得行为中的跨浏览器一致性，然后从那里使用自定义样式。就个人而言，我从不设计html元素的样式，并从身体下来工作。像这样工作我不会遇到这些问题，因为它们由normalize.css处理。

两个相同大小的元素显示不同的宽度

2 个答案: