右侧渲染问题（歌剧和野生动物园）中的空白答案

【问题标题】：white space in the right side rendering issues (opera and safari)右侧渲染问题（歌剧和野生动物园）中的空白
【发布时间】：2013-04-26 03:42:51
【问题描述】：

嗨，当我在宽度中使用百分比时，有人可以知道为什么 opera 和 safari 在 right 中有额外的空白。以下是我的代码：

safari 5.1 和 opera 11.11

fiddle

html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>sample</title>

  <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

    <div class="wrap">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>

css:

    html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, img  {
  margin: 0; padding: 0
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

body {
  font-family: arial, sans-serif;
  font-size:13px;
  color:#fff;
  background-color:#000;

}

a {color:#444; text-decoration:none;}

ul li {list-style-type:none;}

p {padding:0 0 1.5em 0; line-height:1.7em; float:left;}

img {border:none}


.wrap {
    float:left;
    width:100%;
}
.wrap div{
    float:left;
    width:25%;
    height:100px;
    background-color:#222;
}

【问题讨论】：

使用您的示例代码 gives me a document with white-space on every side... 您能发布您的完整 HTML/CSS 吗？
感谢您的回复，我更新了上面的 html..
您帖子中的 CSS 代码是否包含 style.css 中的所有内容？
好吧，从您的 HTML/CSS 来看，您根本没有 reset your CSS
用于 css 重置像这样 html,body,div,.wrap{margin:0;padding:0;}

标签： css html

【解决方案1】：

尝试添加这个 CSS：

body {
   margin: 0px;
   padding: 0px;
}

【讨论】：

在我的 css 问题中添加这个仍然存在。
您刚刚更新的代码在 Safari 上对我来说没有空白。此外，您可以使用通配符而不是列出所有这些标签 - *{margin:0px;padding:0px;}
我有 safari 5.1 和 Opera 11.11

【解决方案2】：

酷！似乎 Safari 的计算非常错误。如果您调整框架的大小，您有时会看到它适合。不知道发生了什么。但是，可能的解决方法是display: table:

.wrap {
    width:100%;
    display: table;
}

.wrap div{
    width:25%;
    height:100px;
    background-color:#222;
    display: table-cell;
}

Here is a demo.

在你的情况下这可能是不可能的，不知道。但它解决了错误的计算问题。

【讨论】：