Question

此代码的输出在Windows上的FF，Chrome和Safari中看起来非常相似。在IE7中，它看起来很奇怪。

对于所有其他浏览器，帧div完全包装了canvas div，即使帧中有24X24 div但在画布外。 IE7在画布上方的框架中为“蓝框”div留下了额外的空间。一旦漂浮，我认为它原本占据的空间会崩溃。这是我在其他浏览器中看到的行为。

是否有一些技巧让IE7像其他人一样崩溃这个空间？

编辑：只是想知道这个例子应该代表什么。它应该代表一个嵌入式小部件。 “画布”是内容所属的位置。 “框架”是托管站点用于控制窗口小部件与页面其余部分之间的外观和行为的内容。红框和蓝框div表示小部件中的控件。红框是一个控件放在那里我的小部件代码。蓝框表示框架添加的控件（可能是允许窗口小部件在页面上拖动的句柄）

这是完整的样本

<!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" lang="en" >
<head>
<title>CSS Positioning</title>
<style type="text/css">
#frame {
  position: relative;      /* so subelements can be positioned             */
  width: 400px;            /* an arbitrary width                           */
  border: 1px solid black; /* a border so you can see it                   */
}
#canvas {
  position: relative;      /* so subelements can be positioned             */
  width: 400px;            /* an arbitrary width                           */
  border: 1px solid black; /* a border so you can see it                   */
}
#blue-box{
  position: relative;      /* so I can position this element               */
  float: right;            /* I want this element all the way to the right */
  width: 24px;             /* set size of eventual graphic replacement     */
  height: 24px;
}
#red-box{
  position: relative;      /* so I can position this element               */
  width: 24px;             /* set size of eventual graphic replacement     */
  height: 24px;
}

</style>
</head>
<body>

<div id="frame">
  <div id="blue-box">blue</div>
  <div id="canvas">
    <div id="red-box">red</div>
  </div>
</div>

</body>  
</html>

Emily的额外例子=========================================== =========

<!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" lang="en" >
<head>
<title>CSS Positioning</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
#one {
  background-color: red;
  float: right;
}
#two {
  background-color: blue;
  border: 1px solid black;
}

</style>
</head>
<body>

<div id="one">one</div>
<div id="two">two</div>

</body>  
</html>

Answer 1

我之前遇到过这个问题而且我很难记住它发生了什么。我知道你需要从position: relative开始#blue-box。

Answer 2

“frame”和“canvas”div上的大小调整可能存在问题。它们看起来都是相同的大小加上边框的大小（它被添加到元素的总大小）。尽量不要为“画布”div指定一个大小，但要给它一个余量，以便使用“blue-box”div正确分隔它。

如有疑问，请通过将边距/填充设置为0一个可疑元素来重置元素。如果未定义浏览器，则浏览器之间可能会出现默认间距。

另外，我不相信这里需要“位置：亲戚”。

橡子

Answer 3

#frame包含#canvas，其宽度为400像素，#blue-box宽度为24像素。

#frame的宽度必须至少为424px（可能需要更多...取决于元素上的填充）但#frame的宽度仅为400px。

尝试将#frame的宽度更改为430px，以使两个框位于同一行。根据删除的css重置的填充，您可以使#frame的宽度变小。

然后您需要将#blue-box放在#canvas

中

<div id="frame">
  <div id="canvas">
    <div id="blue-box">blue</div>
    <div id="red-box">red</div>
  </div>
</div>

浮动的div不会重叠或“向下到达他们之下的div”。这是关于CSS Floats

的好文章

这是我推荐使用绝对定位的一次。 position: absolute从文档流中删除元素 - 就像您想要#blue-box一样。

#frame {
  position: relative;      /* so subelements can be positioned             */
  width: 400px;            /* an arbitrary width                           */
  border: 1px solid black; /* a border so you can see it                   */
}
#canvas {
  width: 400px;            /* an arbitrary width                           */
  border: 1px solid black; /* a border so you can see it                   */
}
#blue-box{
  position: absolute;      /* so I can position this element               */
  right: 0;                /* I want this element all the way to the right */
  top:0;
  width: 24px;             /* set size of eventual graphic replacement     */
  height: 24px;
}
#red-box{
  width: 24px;             /* set size of eventual graphic replacement     */
  height: 24px;
}

<div id="frame">
   <div id="blue-box">blue</div>
  <div id="canvas">
    <div id="red-box">red</div>
  </div>
</div>

Answer 4

IE增加了一些额外的填充和边距。您应该使用reset.css file并重试。

通常，IE不像浏览器那样，因此您可能需要创建IE特定的样式表。

<!--[if IE]><link rel="stylesheet" type="text/css" href="/public/stylesheets/ie.css" /><![endif]-->

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/public/stylesheets/ie6.css" /><![endif]-->

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/public/stylesheets/ie7.css" /><![endif]-->

修改：

包装画布是一个搞乱的东西，因为它与框架的大小相同。如果你这样做：

#frame { position: relative; /* so subelements can be positioned */ width: 460px; /* an arbitrary width */ border: 1px solid black; /* a border so you can see it */ }

它解决了这个问题。您只需调整宽度即可获得所需的大小。

EDIT2 ：我看到你的一条评论说你希望IE的行为与其他浏览器一样......这不会发生，这个浏览器太可怕了。您可能希望完全重构代码以避免导致IE中出现问题的不必要的包装器

Answer 5

您是否尝试删除代码中的空格。 ie7对白色空间很有趣。

<div id="frame"><div id="blue-box">blue</div><div id="canvas"><div id="red-box">red</div></div></div>

约什

IE CSS浮动问题

5 个答案: