Question

嗨，当我在宽度中使用百分比时，有人可以知道opera和safari在right中有多余空格的原因。下面是我的代码：

safari 5.1和opera 11.11

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;
}

enter image description here

Answer 1

尝试添加此CSS：

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

Answer 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.

这可能不适用于你的情况，不知道。但它解决了错误的计算问题。

右侧渲染问题的白色空间（歌剧和野生动物园）

2 个答案: