IE8 将 CSS 样式集中在一起
我正在 IE8 的开发者模式下调试我的应用程序，并且遇到了一些非常奇怪的行为。 IE8 的开发模式通常会在新行上显示每个 CSS 样式，但在这些情况下不会...举三个例子：
#1
.messages .read
background-color: rgb(234,234,234); HEIGHT: 1.5em
padding-top: 0.3em
#2
a:link
color : rgb(80,80,82); TEXT-DECORATION: none
#3
#messaging .body
border-bottom: rgb(...) 1px solid
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDFDFD', endColorstr='#C2C2C2'); BORDER-LEFT: rgb(...) 1px solid; PADDING-BOTTOM: 1.5em; MARGIN: 15px 0 25px; etc.
如您所见，在这三种情况下 IE 似乎表现得很奇怪，尤其是对于 #3< /code>，我得到了一些非常奇怪的人工制品，例如我的渐变框周围有丑陋的深灰色边框。
是否有已知的方法可以解决此行为？
更新 - 通过将 position:relative; 添加到该样式，修复了渐变伪影
#3 出奇地容易。显然 IE 需要这个才能正确渲染其渐变。
我仍然有兴趣知道为什么 IE 将一些样式集中在一行上，以及这种怪癖是否有任何实际效果。
I am debugging my app in IE8's developer mode and I'm running into some very strange behavior. IE8's dev mode usually displays every CSS style on a new line, but not in these cases... take three examples:
#1
.messages .read
background-color: rgb(234,234,234); HEIGHT: 1.5em
padding-top: 0.3em
#2
a:link
color : rgb(80,80,82); TEXT-DECORATION: none
#3
#messaging .body
border-bottom: rgb(...) 1px solid
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDFDFD', endColorstr='#C2C2C2'); BORDER-LEFT: rgb(...) 1px solid; PADDING-BOTTOM: 1.5em; MARGIN: 15px 0 25px; etc.
As you can see, these are three cases where IE seems to behave strangely, and especially for #3, I get some really strange artefacts, such as an ugly dark grey border around my gradient box.
Is there a known way of getting around this behavior?
Update - gradient artefacts fixed
#3 was fixed surprisingly easily, by adding position:relative; to that style. Apparently IE needs this in order to render its gradients properly.
I'm still interested in knowing why IE lumps some styles together on one line, and whether this quirk has any actual effect.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在您提供的示例中，至少缺少一些分号。这很可能就是这里的问题。
正如评论中所建议的：尝试验证你的 CSS。这是来自 W3 的：
http://jigsaw.w3.org/css-validator/
In the samples you give there are at least some missing semi-colons. This may very well be the problem here.
As suggested in comments: try to validate your CSS. Here's the one from W3:
http://jigsaw.w3.org/css-validator/