XHTML 1.0 Strict、CSS 和 img 边框答案

【问题标题】：XHTML 1.0 Strict, CSS and img bordersXHTML 1.0 Strict、CSS 和 img 边框
【发布时间】：2009-03-18 01:02:52
【问题描述】：

我在我的网站上使用 XHTML 1.0 Strict 并且在我的链接上有以下 CSS 样式：

a:hover {
    border-bottom: 1px dotted #447799;
}

还有我的图片：

a img, img {
    border: none;
    text-decoration: none;
}

然而，当我将鼠标悬停在标题横幅上时，底部边框仍然显示为虚线和蓝色。显然，我不能使用border="0"，因为它不是XHTML 1.0 Strict Doctype 的一部分。

您可以在这里查看我的网站：armorycraft.com

建议？

【问题讨论】：

【解决方案1】：

你可以使用一个类：

a.imageAnchor:hover {
    border:none;
}

不是最漂亮的解决方案，但应该可以。

【讨论】：

我试图避免创建类，但我会尝试的。
此方法有效。如果可能的话，我更喜欢无类方法。如果我找不到工作方法，我会接受这个答案。
问题是你看到的边框在锚点上而不是图像上。如果它包含图像，则没有仅 css 的方法来反向引用锚点并删除边框。你可以用 javascript 来做，但我猜这有点过头了。
如果浏览器确实正确实现了 CSS，就会有纯 CSS 的方式。
@Peter：我很确定没有定义前瞻的 CSS 标准，至少在 1 或 2 中。如果你知道一个，我会非常有兴趣学习它。跨度>

【解决方案2】：

试试这个：

a img:hover, img:hover {border:none; text-decoration:none;}

【讨论】：

【解决方案3】：

问题是边框附加到锚点，但是你设置了一个边框：没有到图像。

没有简单的方法可以避免这种情况。我建议稍微调整一下：

a:hover {
    border-bottom: 1px dotted #447799;
}

a.image:hover {
    border: none;
}

所以，将“图像”类添加到所有带有图像的锚点，就完成了。

【讨论】：

【解决方案4】：

a:hover 有border:1，所以a:hover img als 自动有border:1

我认为这会修复它

a:hover img{border:0;}

现在你不需要为它创建一个全新的类

【讨论】：

【解决方案5】：

这对我有用：（我想你只是忘记了冒号 (:)

a:img, img {
    border: none;
    text-decoration: none;
}

祝你好运！

【讨论】：