IE7 自动为内联 CSS 添加透明度
我有一个具有透明度的 PNG。 IE7，在它的所有荣耀中，采用了我的内联 CSS 并将其修改为在其中包含“背景颜色：透明”。这是有问题的，因为 CSS 行搞乱了 PNG 图像下方的表格颜色。
这就是我告诉 IE 渲染的内容：
<td style="white-space: no-wrap; margin: 0; padding: 0; background: url('FOO.PNG') left top repeat-y;"> ... </td>
这是我使用 IE 开发工具 (F12) 时得到的结果：
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-image: url("FOO.PNG"); background-attachment: scroll; background-repeat: repeat-y; background-position-x: left; background-position-y: top; background-color: transparent;"> ... </td>
正如您所看到的，幕后发生了一些神奇的事情。我假设 IE7 读取 png 文件并确定它具有透明度。一旦完成，它会专门添加内联 CSS。罪魁祸首是“背景颜色：透明度”。如果我在开发人员工具中禁用它，一切都会正常。
有人遇到过这个吗？
I have a PNG that has transparency in it. IE7, in all it's glory, takes my inline CSS and modifies it to include "background-color: transparent" in it. This is problematic because that CSS line screws up the table color underneath the PNG image.
This is what I tell IE to render:
<td style="white-space: no-wrap; margin: 0; padding: 0; background: url('FOO.PNG') left top repeat-y;"> ... </td>
This is what I get when I use IE's developer tools (F12):
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-image: url("FOO.PNG"); background-attachment: scroll; background-repeat: repeat-y; background-position-x: left; background-position-y: top; background-color: transparent;"> ... </td>
As you can see, there is some magic happening behind the scenes. I'm assuming that IE7 reads the png file and determines that it has transparency. Once it does that, it specifically adds inline CSS. The culprit being "background-color: transparency". If I disable that in the Developer tools, all works fine.
Has anyone run into this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
奇怪 - 尝试以老式方式指定背景（即不是简写）
我希望 IE 在这种情况下不会添加额外的内联样式（除了分开简写
margin和padding）。必须承认，我很惊讶
background-color:transparent引起了问题。另外-为什么是内联样式？weird - try specifying the background the old fashioned way (i.e. not shorthand)
I would expect IE not to add additional inline styles in this case (aside from splitting up the shorthand
marginandpadding).Must admit I'm surprised
background-color: transparentis causing an issue. Also - why inline styles?这是根据规范。
当您使用速记属性时，您未明确指定的任何值都将重置为其默认值。
如果您想获取原本通过级联应用的值，请不要使用该属性的简写版本（使用
background-image和background -position和等。This is per the specification.
When you use a shorthand property, any values you don't explicitly specify are reset to their default values.
If you want to get the value that would otherwise be applied through the cascade, don't use the shorthand version of the property (use
background-imageandbackground-positionand etc.