Question

所以我为我的clients website创建了一个漂亮的菜单，至少它在mac Chrome和IE 8上的FF Chrome Safari中看起来不错，但它在IE 6,7中打破了

这是一个相信相关的CSS

.home{
    padding-top:5px;
    position:relative;
    background: black;
    width: 260;
    height: 280px;
    margin:0px 30px 0px 20px;
    top:-60px;
    float:left;
}

.home img{
    max-width: 300px;
    max-height: 100px;
    padding-bottom:8px;
    margin:auto;
    border:none;
    display:block;
}

但它全部在网站上

我一直在尝试不同的方法来获得相同的结果，但我只是看不到让它在IE中工作＆lt; 8

任何想法？

修改

os如果我取出显示：阻止它显示，但然后不是像我想要的那样垂直堆叠所以然后我尝试向左浮动清除右边这是有效的，除了它们没有居中那么更多的建议？

Answer 1

从语义上讲，您可能希望使用HTML查看一些内容。首先，您有一个HTML5文档类型，但您没有利用任何HTML5标记。例如，您的导航元素应位于<nav>中，您的“故事”可能位于<section>中，依此类推。有关新标签的信息，请查看Dive into HTML5's pointers section。

其次，您可能希望将三个徽标图像放在导航栏外的单独容器中。您仍然可以使用负上边距或负顶部和相对定位将导航定位在您拥有它的位置。您可以将z-index添加到徽标容器和导航中以分别对它们进行排序，这样导航的背景就不会覆盖徽标。

您可能希望使用在Internet上浮动的标准CSS重置之一。 Eric Meyer's reset是一个很好的起点。一旦开始使用HTML5元素，您就需要为尚不支持它的浏览器提供后备。我为此使用了Google's shiv，它很适合我的需要。

最后，我看到你正在使用具有透明背景的GIF进行产品摄影，而且你有“锯齿”。由于你需要支持旧版本的IE，我会选择PNG8。你将获得更高质量的图像，并且能够拥有透明的背景，没有锯齿。

我认为，一旦您对HTML进行了一些结构性更改以清理它，您就可以更轻松地修复此布局，并且您无需在导航无序列表中将这些徽标定位。此外，您将拥有一个语义更正确的布局，并且使用屏幕阅读器的人更容易阅读。

快乐的编码！

CSS显示：块中断了我的布局

1 个答案: