Question

目前我有2个问题。首先，在chrome和safari中，图像链接周围有一个灰色边框。 firefox中没有边框。这是代码：

<a href="link.html" target="_blank">Link title <img class="leaving" /></a>

和css：

.leaving {
    background-image: url("images/leaving.png");
    height:10px; width:10px;
    display:inline-block;
    background-repeat:no-repeat;
    border:none;
}

我如何摆脱边界？

此外，某些标题链接在chrome和safari中加下划线，即使我将text-decoration设置为none。我想知道如何摆脱下划线以及如何改变它的颜色。

<a href="link">
<h3>Title</h3>
</a>

a h2,h3{
    color:#00264B;
    text-decoration:none;
}

“a”设置为在其他地方加下划线，但不应该“a h3”覆盖其他任何内容？这是怎么回事？

感谢。

Answer 1

您的代码中可能存在错误：）

到目前为止，这是你所拥有的：

a h2,h3{
    color:#00264B;
    text-decoration:none;
}

上面的代码说的是包含“a”标签的所有H2，以及所有h3（不包含在“a”标签中）

首先，如果您想要所有包含在“a”标签内的H3，那么您需要这样做：

a h2, a h3{
    color:#00264B;
    text-decoration:none;
}

请注意，我在CSS

中添加了另一个“a”

其次，也许更重要的是，我认为将“a”标签封装在“h”标签内而不是你的方式是更好的形式：

h2 a, h3 a{
    color:#00264B;
    text-decoration:none;
}

但这可能不适用于您现有的代码：

希望这有帮助

Answer 2

这是跨Firefox和Safari的着名跨浏览器问题。然而，这个问题的解决方法是用span标记替换img标记，并且每个东西都按预期工作。我已经更改了以下代码

<body>
    <a href="link.html" target="_blank">Link title <span class="leaving"/></a>

</body>
</html>

或者如果你想继续使用img标签，你需要从css定义中删除width属性。请在下面找到修改过的css

.leaving {
    background-image: url("images/leaving.png");
    height:10px;
    display:inline-block;
    background-repeat:no-repeat;
    border:none;
}

CSS链接在Chrome和Safari与Firefox中表现不同

2 个答案: