的文本定义了背景图像的标签不会显示在 Internet Explorer (7-8) 中
好吧， 我觉得问这个问题很愚蠢，但我在风格化锚标记和在 IE7/8 中显示重复的背景图像和文本时遇到问题。我的代码在 Firefox、IE9、Chrome 和 Safari 中运行良好，但在 IE7/8 中文本不会显示。
我的 PHP 输出如下所示：
<a class="anchorLink border-radius-5 anchorButton" href="#anchorPanel2">Would you like to know more?</a>
此元素的 CSS 如下所示：
.anchorButton {
background-image: url("./images/button-gradient.png");
height: 52px;
background-repeat: repeat-x;
background-color: transparent;
background-position: 0 0;
float: left;
line-height: 52px;
font-size: 1.4em;
color: #fff;
border: 3px solid #a8a8a8;
margin-top: 10px;
padding: 0 15px;
z-index: 900;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #fff !important;
text-shadow: -1px -1px #707070 !important;
display: block;
}
要查看我在说什么，您可以访问：dtelepathy.swampedpublishing.com。如果您在 Firefox 和 IE7/8 中查看该网站，您会发现我用锚标记制作的橙色“按钮”在 IE 中不显示文本。
我愿意尝试一切，因为我真的不确定这里发生了什么。
Alright,
I feel dumb asking this but I am having issues with a stylized anchor tag and displaying both a repeating background image and text in IE7/8. My code works fine in Firefox, IE9, Chrome, and Safari but in IE7/8 the text will not show up.
My PHP is outputting something like this:
<a class="anchorLink border-radius-5 anchorButton" href="#anchorPanel2">Would you like to know more?</a>
My CSS for this element looks like this:
.anchorButton {
background-image: url("./images/button-gradient.png");
height: 52px;
background-repeat: repeat-x;
background-color: transparent;
background-position: 0 0;
float: left;
line-height: 52px;
font-size: 1.4em;
color: #fff;
border: 3px solid #a8a8a8;
margin-top: 10px;
padding: 0 15px;
z-index: 900;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #fff !important;
text-shadow: -1px -1px #707070 !important;
display: block;
}
To see what I am talking about you can visit: dtelepathy.swampedpublishing.com. If you look at the site in Firefox and IE7/8 you will see that the Orange 'buttons' that I made out of anchor tags do not show the text in IE.
I am willing to give whatever a shot as I am REALLY unsure what is going on here.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我没有 IE7/8 来测试，但这听起来很像 IE peek- 的变体a-boo 错误。也许有一些建议的更改互联网会有所帮助。
I don't have IE7/8 to test, but this sounds suspiciously like a variation on the IE peek-a-boo bug. Maybe some of the changes suggested around the interwebs will help.
我刚刚为你写了一份指南。确保您遵循这些步骤，并且可能将您的问题编辑得更具体。目前，我们只能通过试错来猜测和发现问题。
调试 CSS 代码的步骤（是 = 下一步，否 = 参见下文）：
禁用 JavaScript。问题仍然存在吗？
暂时禁用所有特定选择器，例如：
>。问题消失了吗？[2]一一添加所有选择器。当新添加的选择器引起问题时，禁用所有选择器，并使用相同的选择器以确保问题仅由该选择器引起。
禁用所有行，并添加启用 CSS 代码的几行（块）。当重新添加块后出现问题时，删除刚刚添加的块，然后将属性一一添加回来。
使用 Google、Stack Overflow 或 Mozilla 开发者网络 查找有关该属性的文档。也许，您以错误的方式使用了该财产。
[2] 该问题是由标签选择器或继承的样式引起的。
I've just written a guide for you. Make sure that you follow these steps, and -perhaps- edit your question to be more specific. Currently, we can only guess and find the problem by trial&error.
Steps to debug your CSS code (yes = next step, no = see below):
Disable JavaScript. Does the problem persist?
Temporary disable all specific selectors, eg:
<a class="foo bar">><a x-class="foo bar">. Did the problem disappear?[2]Add all selectors, one by one. When a newly added selector is causing problems, disable all selectors, and use the same selector to make sure that the problem is caused by this selector only.
Disable all lines, and add enable a few lines (block) of the CSS code. When the problem shows up after re-adding a block, remove the just-added block, and add the properties back, one by one.
Use Google, Stack overflow or the Mozilla Developer network to find documentation about the property. Perhaps, you've used the property in a wrong way.
[2] The problem is caused by a tag selector, or an inherited style.
我可以在 Win7 上的 IE8 中正常看到橙色按钮中的文本。
尽管在 IE8 中，边框颜色的悬停对它们不起作用，但这是因为 VML 用于圆角效果。我对 VML 进行了很多实验，它给元素布局带来了很多问题。
我会检查删除 border-radius-5 类是否可以解决问题。这样您就可以查看这是否导致了您所看到的文本问题。
I can see the text in the orange buttons just fine in IE8 on Win7.
Your hover for the border color doesn't work on them though in IE8, but that is because of the VML used for the rounded corner effect. I have experimented a lot with VML and it causes tons of problems for element layouts.
I would check to see if removing the border-radius-5 class fixes the problem. That way you can see if that is causing the text problem you are seeing.