几个IE CSS问题

Question

好的，我承认我总是看到人们对IE（Internet Explorer xx）抱怨并且我从来没有真正抱怨它，但我意识到我可能错了。我是一个铁杆的Chrome用户，偶尔我会打开Firefox或者测试一个视图，但直到前几天才用IE。我在我正在工作的网站上打开IE 8并感到震惊，有太多错误而且我不是在责怪IE，我只是在做正确的CSS和设计，我更像是一个后端编码器。所以很可能我只是没有使用正确的CSS

以下是我项目的IE8中的图像，我已经标记了每个有问题的部分。

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和带边框半径的铬一起工作

---

4 与标题部分相同，它应该扩展页面的整个宽度，但它不会

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

这是另一个在页脚顶部呈曲折形状的背景图像，它甚至没有在IE中显示下面的代码

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

---

我意识到这是一个模糊的问题，我不希望有人重新编码网站，暗示为什么我没有添加所有的HTML。

我只是问上面的CSS是否有任何突出的因为它与IE合作不正确。

我从未意识到IE与Chrome和Firefox有多么糟糕或不同，我不想继续犯同样的错误，我不在乎支持IE 100％，但我认为我可以做得比我好一点电流。

感谢您的帮助

Answer 1

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

2）看起来li在块显示中....将它们设置为float：left;显示：内联;

3）ie8不支持border-radius。对于ie9，你需要添加-ms-border-radius;你可以找到＆lt;的修复程序ie9 border-radius support

1）和4a）再次，很难说，但宽度：100％并且它们没有覆盖它，我将假设ie正确读取父宽度。将父元素设置为width：100％。

你可以使用条件评论来定位，这样你就不会弄乱你的真实风格：

＆lt;！ - [if IE]＆gt; ＆LT;风格＆GT; div.parentelement {宽度：100％} ＆LT; /风格＆GT; 百分比抑制率ENDIF] - GT;！