IE 中的 CSS/HTML 问题 - 如何解决？答案

【问题标题】：CSS/HTML problem in IE - how to fix?IE 中的 CSS/HTML 问题 - 如何解决？
【发布时间】：2010-07-01 07:15:28
【问题描述】：

我正在处理这个页面：

http://noasimon.co.il/

在 firefox、chrome、opera 和 IE8 中看起来不错
但是当我在 IE8 中打开“兼容性视图”时，菜单图像会出现在文本下方。

仅在此视图中发生的另一个问题是在此页面中：
http://noasimon.co.il/exhibition2010

缩略图在视图之外太左了。

有人知道我该如何解决这个问题吗？我对这类东西的经验很少。

【问题讨论】：

标签： html css internet-explorer-8 internet-explorer-7 compatibility-mode

【解决方案1】：

.ngg专辑{
    位置：相对；
}
.ngg-专辑图片
图像{
    位置：绝对；
    左：0；
    顶部：0；
}
.ngg-专辑图片 {
    显示：内联；
}

【讨论】：

工作，只有一个修复 - 而不是left:0，它应该是right:250px。谢谢！
在哪个 IE 中？您意识到您的 ie.css 将适用于所有版本的 IE，对吧？
当屏幕太窄时，在 IE8 上，图像再次低于文本，在 IE7 上，文本被图像隐藏。您可以在网站上自己查看。另外，这个页面没有ie.css。
我会看一下，但是我可以在网站上找到的每个页面都有一个 ie.css。
你是对的，我的错。我将不胜感激任何进一步的帮助。现在的问题是当我将窗口调整为非常窄时。

【解决方案2】：

恭喜获得 W3C 有效的 HTML！（我检查只是为了确定）

因为看起来div#header 总是会是50px 高并且总是在div#wrapper 内部的(0,0)，而div.sidebar 总是在(0,50)，为什么不这样做：

div#wrapper {
    position: relative;
}

div#wrapper div#header {
    position: absolute;
    height: 50px;
    top: 0px;
    left: 0px;
}

div#wrapper div.sidebar {
    position: absolute:
    top: 50px;
    left: 0px;
}

【讨论】：

..标题很好，我实际上是在谈论菜单

【解决方案3】：

再次查看您的页面时，我认为我的朋友使用的一个技巧可能会有所帮助：

* {填充：0;边距：0;}

这通常有助于解决与默认边距和内边距值相关的常见 IE 兼容性问题。

【讨论】：

您是否在 CSS 文件的顶部添加了这一行？只是好奇它是否会有所作为......

【解决方案4】：

看起来这是"double margin"的好案例

对于“兼容视图”，您需要做的基本上是在浮动且有边距的元素上将display 设置为inline。

.ngg-albumtitle {
    float: right;
    display: inline;
}

【讨论】：

【解决方案5】：

你可以使用..

.sidebar ul { 边距：0px；填充：0px;

} .sidebar李{ 浮动：对；显示：内联块；边距：1px；填充：0px 4px'

字体大小：..;

}

谢谢普蒂瓦里。

【讨论】：