1

我有两个 div，一个容器和一个具有两种不同颜色的孩子。当我将 body 或父 div 上的边距更改为百分比量时，我会在边缘上看到一条父级背景颜色，表明父级在某种程度上比子级稍大（尽管事实上子级是父级宽度和高度的 100%（或更多）。

HTML：

<div id="parent">
    <div id="child">test
    </div>
</div>

CSS：

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#parent {
width: 98%;
height: 60%;
margin: 1% auto;
position: relative;
overflow-x: hidden;
background-color: red;
}

#child {
width: 200%;
height: 100%;
background-color: #337788;
position: absolute;
left: 0;
}

这是jsfiddle：

http://jsfiddle.net/Cd2Sd/

我知道这与使用边距百分比值有关，因为这取决于我如何缩放浏览器。有没有办法解决这个问题？

4

1 回答 1

1

这应该解决它

body 
{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#parent 
{
  width: 98%;
  height: 60%;
  margin: 0px 1% 0px 1%;
  overflow: hidden;
  background-color: red;
}

#child
{
  width: 100%;
  height: 100%;
  background-color: #337788;
}

我已经去掉了我认为令人困惑的额外 CSS。

此外，边距样式必须格式化如下

Margin: Top Left Bottom Right;

html

<div id="parent">
  <div id="child">test</div>
</div>

更新

试试这个，我已经把你的定位绝对和相对放回去，并将 CHILD 样式重置回 0px 的边距。我还实现了“大纲样式”css 样式，它在我的 IE9 和 Opera 12 浏览器中看起来都很好

body
{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#parent 
{
  width: 98%;
  height: 60%;
  margin: 1%;
  position: relative;
  overflow: hidden;
  background-color: red;
  outline-style: none;
}

#child 
{
  width: 100%;
  height: 100%;
  background-color: #337788;
  position: absolute;
  left: 0px;
  outline-style: none;
}

我没有安装 Chrome，所以无法在该浏览器中测试它

于 2013-04-22T23:07:16.263 回答