Question

我正在使用div和CSS样式编写我的第一个更严肃的网页设计（我有点新手）。我花了很多时间来制作，我现在所做的（大约占所有设计的30％），现在我处于可以花费大量时间的位置，但仍然没有找到解决方案。

以下是所有浏览器中该部分设计应该如何正确显示的图像： enter image description here

这是图像，它现在在IE8中看起来如何编码（我标记为蓝色错误部分）： enter image description here 你可以看到不应该在这里的差距......

同时它在Mozilla Firefox 9.0.1中看起来如何（盒子是div'ed okey，但文字没有到位）： enter image description here

我认为它可能是浮点数的东西，因为我在一些div中使用它..但我不知道究竟是什么以及如何开始寻找解决方案...所以我来到Stack Overflow。因为我不知道现在要复制哪些HTML和CSS的确切部分，所以我上传所有网页（带图片）并提供链接进行检查：http://www.mediafire.com/?uf6bzly4dktummk

我希望有人可以帮助我：s

抱歉我的英语不好。

Answer 1

FF出了什么问题。你必须给.texthold一个固定的宽度，否则浮动将不起作用：

.texthold {
 width:97px;
}

最好在文本周围包裹<p></p>而不是div，但这不是代码工作所必需的。

Answer 2

我在Chrome中看到了与你的firefox问题相同的问题。这是浏览器的不一致。如果不是，IE和Firefox上的bug应该是相同的。尝试使用chrome进行开发并添加重置。

所以这就是我的表现：

删除以下内容中的display:inline：.meniu，.meniu2，.meniu3，.meniu4，.thumbas和{{1你已经把它们漂浮在左边了，不需要让它们内联。
从.shadow课程中删除display:inline和float:left。浮动它将其从流中移除。当它超过图像右侧的宽度时，它会包裹在图像下方。将它们显示为内联使得它不尊重顶部和底部边距。无需固定宽度。

这些解决了Firefox的问题。但是，我无法弄清楚为什么IE有间距。 DOM没有任何问题，它们是另外两个div。应该没有空间。

Answer 3

您已使用

作为文字部分。您可以删除p标签。我认为这是IE的差距的原因。感谢。

Answer 4

差距的原因是我的HTML文件缺少DOCTYPE，从而触发了Quirks模式。我的代码暗示文档类型是XHTML，因此我将其添加到代码顶部，替换当前标记。

<!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">

用CSS样式找不到解决方案

4 个答案: