Question

在展示公司徽标时，我今天看到了新的东西。

他们设置了一个高度和宽度并溢出：隐藏在h1标签上，并在h1标签内的标签上设置一个负边距，以防止文字显示。

代码看起来像这样

<h1 class='logo'><a href='/'>Company Name</a></h1>

css看起来像这样：

.logo {
  text-indent: -9999em;
  overflow: hidden;
  text-align: left;
  background-image: url(/images/logo.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  width: 253px;
  height: 80px;
  float: left;
  margin-left: 10px;
}
.logo a {
  display: block;
  width: 253px;
  height: 80px;
}

我总是更喜欢在a标签内使用span并将其设置为display：none的方法。

我的代码如下所示：

<h1 class='logo'><a href='/'><span>Company Name</span></a></h1>

我的css看起来像这样：

.logo {
  background: url(/images/logo.png) top left no-repeat;
  margin-left: 10px;
  a {
    display: block;
    width: 253px;
    height: 80px;
    span {
      display:none;
    }
  }
}

忽略我的嵌套CSS看起来更干净的事实，我是否正在用我的额外跨度和显示做正确的事：无或是否有一个原因导致疯狂的文本缩进和其他额外的东西，以前的程序员扔进样式表？

为了清晰起见编辑：我不是要求以不同的方式显示公司徽标。使用带有公司名称的h1是一种公认的标准做法。我想我想问你用h1和css显示公司徽标的方式是什么？为什么呢？

Answer 1

设置display: none会隐藏屏幕阅读器中的内容，因此是一种非常糟糕的方法。

使用文本缩进技巧不会，但仍然不是最理想的。

图片是内容，应该是<img>元素。

Answer 2

你给了我一个主意......

<style type="text/css">

#logo {
    margin: 0;
}

#logo,
#logo a,
#logo:before {
    display: block;
    width: 275px;
    height: 95px;
    position: relative;
}

#logo a {
    position: absolute;
    top: 0;
    left: 0;
    line-height: -1px;
    font-size: 0;
    text-decoration: none;
    overflow: hidden;
}

#logo:before {
    content: "\0020";
    background-image: url('http://www.google.com/intl/en_ALL/images/srpr/logo1w.png');
    position: absolute;
}

</style>
<h3 id="logo"><a href="http://www.google.com">Google</a></h3>

这可能不适用于IE7，并且Safari会将A标记中的文本渲染为左上角的一点涂抹。我敢打赌，尽管如此，我还是可以稍微消除一下。也许我将来可以使用这种技术。

Answer 3

我使用了徽标代码..

.logo

{
  width: 253px;
  height: 80px;
  float: left;
  overflow: hidden;
  margin:0px;
  padding:0px;

}

.logo a
   {
   display:block;
   cursor:pointer;
   border:0px;
   font-size:1px;
   text-indent:-500px;
   text-decoraton:none;
   }

<h1 class="logo"><a href="#">company name</a>

感谢 Ptiwari ..

Answer 4

无论哪种方式，你都试图欺骗谷歌并受到惩罚。

要回答您的问题，请显示：none表示文本实际上未在页面上查看。文本缩进意味着它仍然存在，蜘蛛仍然会读取文本，因此它可以工作。

同样，我认为这会欺骗搜索引擎并建议反对它。使用Alt标签或找到一个地方将h1与背景图像放在一起。

首选徽标显示方法

4 个答案: