更新

Question

我有两个div，一个容器和一个有两种不同颜色的孩子。当我更改边距时，无论是在正文还是在父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/

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

Answer 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，因此无法在该浏览器中对其进行测试

尽管宽度和高度均为100％，但父级div大于儿童

1 个答案:

更新