html - 如何制作带有 Logo 的可访问h1

Question

我怎样才能有一个链接到主页的标志，也有h1但不可见

我有这样的布局

 <header id="pageHeader">
                    <h1>
                        <a href="<?php bloginfo('url'); ?>">
                        <?php bloginfo('name'); ?>
                        </a>
                    </h1>

然后我将 css 用于图像作为背景，但未加载 Logo ，有人吗？

  header#pageHeader h1 a {
  width:130px;
  height:70px;
  text-indent:-9999px;
  background:url(/pict/logo.png);
  background-repeat: no-repeat;
}

Answer 1

你缺少的 display:inline-block;

比较this fiddle与 this one

此 question 中突出显示的差异，引用如下:

inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.inline
This value causes an element to generate one or more inline boxes.

---

很抱歉解释为什么会这样:

内联 意味着只占用您需要的空间，并允许其他元素随我一起流。您的 a 标签中没有文字。 所以它不需要占用任何空间，所以它不。

inline-block 意味着占用我配置占用的任何空间(在 CSS 中定义)并且还允许元素在我旁边流动。所以这适用于宽度和高度，而内联不适用

另一个选项是block，这意味着占据一整行并且不要让任何东西在我旁边流动