Margin bottom 不想在 Opera 和 Safari 中工作答案

【问题标题】：Margin bottom doesn't want to work in Opera and SafariMargin bottom 不想在 Opera 和 Safari 中工作
【发布时间】：2014-04-05 06:24:21
【问题描述】：

我是网页设计的新手，我一直在做这段代码 html/css，它是关于 css 中的边距的，它看起来真的很简单，但边距底部在所有浏览器中都不起作用。我在 Chrome、Internet explorer 11、Firefox 中对其进行了测试，它可以工作，但在 Opera 和 Safari 中不起作用。我不知道我犯了错误是因为我是菜鸟还是因为浏览器。

这是我的代码 HTML：

<!DOCTYPE html>
<html>
<head>
   <title>CALCULADORA DE CREDITOS - CECyT No. 1 "GONZALO VAZQUEZ VELA" DEL IPN</title>
   <link rel="stylesheet" media="screen" href="prueba.css">
</head>

<body>
   <div id="wrapper">
      Hellow ,i'm a DIV!
   </div>
</body>
</html>

这是我的 CSS 'prueba.css'：

*{margin:0;
padding:0;}


html,body{height:100%;}


body{margin:4%;}

#wrapper{
margin:0 auto 0 auto;
background-color:gray;
width:60%;
height:100%;
}

【问题讨论】：

1.边距在什么元素上不起作用？ 2. 我在您的代码中没有看到特定的边距底部。
正好在正文底部的边缘。
你不需要输入html,body{height:100%}。这很可能是导致您出现问题的原因，因为您的身体正试图达到全宽和全高 + 4% (108%)。 JSFiddle：jsfiddle.net/yFvLT
你是对的，但我在 Opera 和 Safari 中遇到了同样的问题。任何建议
如果您的内容本身大于窗口大小，您可以删除html,body{height:100%}

标签： html css safari margin opera

【解决方案1】：

删除这些部分：

html,body{height:100%;}
body{margin:4%;}

在制作特定尺寸的元素时，仅在对所选元素使用“位置：固定”时使用百分比。

改为在元素本身中设置边距，并且以百分比设置元素仅在元素上有“位置：固定”时才有效。

JSFiddle Demo

【讨论】：