几个IE CSS问题

好吧，我承认我总是看到人们抱怨IE浏览器（Internet Explorer XX），我从来没有真正抱怨，但我知道我可能是错的。我是一名硬核Chrome用户，偶尔我会打开Firefox的某些东西或测试一个视图，但从来没有IE浏览器，直到有一天。我在一个我正在工作的网站上打开IE 8，并且感到震惊，有太多的错误，我不是在指责IE，我只是做了适当的CSS和设计，我更像是一个后端编码器。因此，最有可能的，我只是没有使用正确的CSS几个IE CSS问题

所以下面是从我的项目的IE8的图像，我已经标记的问题在于每个部分。

enter image description here

1）此背景应该扩大页面的宽度和它在Firefox和Chrome一样。

下面是一些CSS这一领域

#header-wrap { 
    width: 100%; 
    position: relative; 
    margin: 0 auto; 
    height: 95px; 
    background: #F3F3F3 url(../images/layout/blue-spike.gif) repeat-x; 
    border-bottom: 1px solid #DEDEDE; 
}

2）这是一个导航无序列表，它应该显示在一行中的所有列表项，从左到右，当它到达广启动项目的一个新的行左到右，它在Firefox和Chrome

#tag-list li a { 
    color: white; 
    text-transform: uppercase !important; 
    background: #585858; 
    padding: 4px 6px 4px 6px!important; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    font: .8em Helvetica,Arial,sans-serif; 
    margin: 1px 0px 3px 3px; 
    display: block; 
    float: left; 
}

3）从2号相同的代码，而是方角的，每一个环节应该是圆角，它与Firefox的这种方式和Chrome与边框半径

同标题部分，它应该扩大网页的整个宽度，但它不

#footer { 
    clear: both; 
    background: #444 url(../images/noise-gray.png) center; 
    color: #666; 
    font-size: 1.1em; 
    with: 100%; 
    padding-bottom: 15px; 
}

这是因为这是在脚的顶部锯齿状的fotter其他背景图片呃，不，即使在IE浏览器显示了以下

#footer-zig-zag { 
    background: url(../images/shake-up.png) top repeat-x; 
}

这个代码，我意识到这是一个含糊不清的问题，我不希望有人来重新编写网站，提示，为何我还没有加入所有的HTML 。

如果有什么脱颖而出，成为不正确而它与IE浏览器，我只是如果从上面的CSS要求。

我从来没有意识到Chrome和Firefox有多么糟糕或不同，而且我不想犯同样的错误，我不在乎支持IE 100％，但我认为我可以做得更好一点我目前的。

感谢您的帮助

来源

2011-11-29 JasonDavis

您使用哪种DOCTYPE？ –

在菜单中 - 浮动LI，而不是A. –

@Diodeus我使用HTML 5 one <！doctype html> LI上的float也解决了这个问题，谢谢 – JasonDavis

没有看到它完全，你是对的，它有点模糊，但是副手，

2）看起来像李是块显示....将它们设置为float：left;显示：内联;

3）ie8中不支持border-radius。对于ie9，您需要添加-ms-border-radius;你可以找到js修复为< ie9边界半径支持

1）和4a）再次，很难说，但与宽度：100％，他们没有覆盖它，我要假设ie正在阅读父宽度作为正确的东西。将父元素设置为宽度：100％。

你可以用条件注释目标即让你不惹你真正的风格是这样的：

< - [如果IE] > <风格> div.parentelement {宽度：100％ } < /风格> < [ENDIF] - >

来源

2011-11-29 17:55:40 albert

几个IE CSS问题

回答

相关问题