代码之家  ›  专栏  ›  技术社区  ›  Gal

safari的css问题-呈现h1内部链接,下划线不均匀

  •  1
  • Gal  · 技术社区  · 16 年前

    我有类似的东西

    <h1>
      <a href="/" title="Home">Home</a>
    </h1>
    

    非常简单。也就是说,FF渲染平滑,下划线效果良好。Safari做了一件我从未见过的奇怪事情,它只在字体衬线和曲线不接触下划线的地方加上“home”下划线,即字母“h”会加上下划线。 之间 这两个“柱子”(听起来很奇怪,我知道),当这两个柱子接触到下划线时,后者的颜色会变得更浅(eee vs_000)。

    更新: 显然,Safari在

     text-shadow: 0px 2px 1px #fff;
    

    有什么特别的原因吗?

    1 回复  |  直到 16 年前
        1
  •  0
  •   ghoppe    16 年前

    原因是文本阴影呈现在最前面的层。如果我是你,我会在h1 a元素的底部添加一个没有文本下划线的边框。

     h1 a {
      text-decoration: none;
      border-bottom: 1px solid blue;
     }
    

    当然,用你链接的任何颜色替换蓝色。

    编辑:意识到阴影可以用 span 标签。

    我认为在使用投影时,在下划线和基线之间留一点空间会更好,但是如果你必须有一个 text-decoration: underline 您必须向标记中添加一个SPAN元素:

    <a href="/" title="Home"><span>Home</span></a>
    

    CSS:

     h1 a span {
      position: relative;
      top: 0px;
      z-index: -100;
     }