小编imi*_*ace的帖子

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

它们设置高度和宽度并溢出:隐藏在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显示公司徽标的方式是什么？为什么？