css - 几个 IE CSS 问题

Question

好吧，我承认我总是看到人们提示 IE (Internet Explorer xx)，我从来没有真正提示过它，但我意识到我可能是错的。我是 Chrome 的铁杆用户，偶尔我会打开 Firefox 进行某些操作或测试 View ，但直到前几天我才打开 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 的相同代码，但不是方 Angular ，每个链接都应该有圆 Angular ，它适用于 Firefox 和带有边框半径的 chrome

---

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

#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。

我只是想问一下，如果从上面的 CSS 中看出有什么地方不适合与 IE 一起使用。

我从来没有意识到 IE 与 Chrome 和 Firefox 有多么糟糕或不同，我不想再犯同样的错误，我不想 100% 支持 IE，但我认为我可以做得比我的好一点当前。

谢谢你的帮助

Answer 1

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

2) 看起来 li 在 block 显示中....将它们设置为 float:left;显示:内联；

3) ie8 不支持 border-radius。对于 ie9，您需要添加 -ms-border-radius；你可以找到 < ie9 border-radius 支持的 js 修复

1) 和 4a) 又一次，很难说，但是 width:100% 并且它们没有覆盖它，我将假设 ie 正在正确读取父宽度。也将父元素设置为 width:100%。

您可以使用条件注释来定位 ie，这样您就不会像这样弄乱您的真实样式:

<!--[如果IE]><样式>div.parentelement{width:100%} <![endif]-->