我听说将 block 元素放在内联元素中是一种 HTML 罪:

<a href="http://example.com">
    <div>
        What we have here is a problem. 
        You see, an anchor element is an inline element,
        and the div element is a block level element.
    </div>
</a>

但是，如果您在样式表中将外部 anchor 设置为 display:block 会怎样？还是错了吗？ block-level and inline elements 上的 HTML 4.01 规范好像是这么想的:

Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.

有人对此问题有任何进一步的提示吗？

最佳答案

取决于您要满足的 HTML 版本:

• HTML 5 声明 <a>元素“可以围绕整个段落、列表、表格等，甚至整个部分，只要其中没有交互式内容(例如按钮或其他链接)”。

• HTML 4.01 指定 <a>元素只能包含 inline elements .一个 <div>是 block element ，因此它可能不会出现在 <a> 中.

  当然，您可以自由设置内联元素的样式，使其看起来 是一个 block ，或者确实设置一个 block 的样式，使其内联呈现。使用条款inline和 block在 HTML 中是指元素与文档语义结构的关系，而 CSS 中的相同术语更多地与元素的视觉样式相关。如果你让内联元素以 block 状方式显示，那很好。

  但是，您应该确保文档的结构在 CSS 不存在时仍然有意义，例如通过屏幕阅读器等辅助技术访问时 - 或者实际上在强大的 Googlebot 检查时。

https://stackoverflow.com/questions/1827965/