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

在锚内放置DIV是否正确?

html

470

Tom · 技术社区 · 15 年前

我听说将一个块元素放在一个内联元素中是HTML的罪恶:

<a href="http://www.mydomain.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>

但是如果你把外锚设计成 display:block 在样式表中?还是错了吗?HTML 4.01规范 block-level and inline elements 似乎是这样认为的:

样式表提供了指定任意渲染元素,包括元素是否呈现为块或内联。在某些情况下,例如内联样式对于列表元素,这可能是合适,但一般来说, 不鼓励作者超越传统中HTML元素的解释这种方式。

有人对这个问题有进一步的建议吗?

13 回复 | 直到 6 年前

670

Peter Majeed 7 年前

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

HTML 5 声明说 <a> 元素“可以环绕整个段落、列表、表格等,甚至整个部分,只要其中没有交互式内容(例如按钮或其他链接)”。
HTML 4.01 指定 <A & GT; 元素只能包含 inline elements . 一 <div> 是一个 block element ,因此它可能不会出现在 <A & GT; .

当然,您可以随意设置一个内联元素的样式,以便出现作为一个块,或者确实设置一个块的样式,使其以内联方式呈现。术语的使用 inline 和 block 在HTML中,元素与文档语义结构的关系是指元素之间的关系,而在CSS中,相同的术语更多地与元素的视觉样式相关。如果使内联元素以块状方式显示,那就好了。

但是,您应该确保当CSS不存在时,文档的结构仍然是有意义的,例如,当通过辅助技术(如屏幕阅读器)访问时,或者当强大的GoogleBot检查时。

dtbarne 12 年前

不,它不会验证,但它通常在现代浏览器中工作。也就是说,在锚内使用一个跨度,然后 display: block 在它上面,这肯定会在任何地方都起作用,而且它会验证!

Ewan Todd 15 年前

W3C文档不使用以下概念 错误的 和罪但是它确实使用了 提供方法 , 可能是适当的 和 气馁的 .

实际上,在第二段 section 4 ,4.01规范详细说明了以下内容:

本文件中的关键词“必须”、“不得”、“必需”、“应”、“不应”、“应”、“不应”、“推荐”、“可以”和“可选”应按照[RFC2119]中的说明进行解释。然而,为了可读性,在本规范中,这些单词并非全部以大写字母出现。

考虑到这一点,我相信决定性的声明 7.5.3块级和内联元素 在那里说

通常,内联元素只能包含数据和其他内联元素。

条件“一般”似乎引入了足够的歧义,可以说HTML4.01允许内联元素包含块元素。

当然,CSS2有一个显示属性值, inline-block ,这似乎适合您描述的目的。我不确定它是否得到了广泛的支持,但似乎有人预料到了这种行为的必要性。

DTD在这里似乎不那么宽容,但是 text of the DTD 遵守规范:

HTML 4.01规范包括附加的不能在内部表达的句法约束 DTD。

在另一条注释中,您建议通过将块包装在定位点中使其处于活动状态。我不认为HTML禁止这样做,而CSS显然允许这样做。因此,为了回答标题问题是否永远正确,我说是的。根据标准,有时是正确的。

Abir 12 年前

带HTML5规格…现在可以将块级元素放在内联元素内。所以现在将“div”或“h1”放在“a”元素中是非常合适的。

Greg 15 年前

你不能放 <div> 里面 <a> -它不是有效的(x)HTML。

尽管您使用display:block设计了一个跨度,但仍然不能在其中放置块级元素:(x)html仍然必须遵守(x)html dtd(无论您使用哪个),不管css如何改变。

浏览器可能会按您的需要显示它,但这并不正确。

Carl Smotricz 15 年前

HTML 4的DTD在 http://www.w3.org/TR/REC-html40/sgml/dtd.html . 这个DTD是规范的机器可处理形式,具有DTD控制XML和HTML4的限制,特别是“暂时”风格,允许许多不“合法”的XML。不过,我认为这接近于编纂说明符的意图。

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

我会将此层次结构中列出的标记解释为允许的标记总数。

虽然规范可能会说“内联元素”,但我很确定这不是为了通过声明 显示类型 要内联的块元素的。不管您如何滥用内联标记,它们都有不同的语义。

另一方面,我发现很有趣的是 special 似乎允许筑巢 A 元素。规范中可能有一些强烈的措辞不允许这样做,即使它是XML语法上正确的,但是我不会进一步讨论这个问题,因为它不是问题的主题。

Community Mike Kinghan 7 年前

这是错误的。使用A span .

Beepye 8 年前

块级元素,如 <div> 可以被包裹 <a> HTML5中的标签。虽然A <DIV & GT; 被认为是 container/wrapper for flow content 和 <A> 考虑的是 flow content 根据 MDN .从语义上讲,最好创建充当块级元素的内联元素。

Dave 15 年前

如果你要努力 <a> 阻止,为什么不放 <A & GT; 在DIV中,作为一个块元素,它会给您同样的效果。

Chris 15 年前

如果将其更改为块样式元素,则不会,它不再是“错误的”,但可能不会验证。但做你正在做的事没有多大意义。您应该将anchor标记保留为一个块级元素,而不使用内部的DIV,或者将DIV放在外部。

user1081070 13 年前

我认为大多数时候当人们问这个问题的时候,他们已经建立了一个只有div的站点,现在其中一个div需要是一个链接。

我看到有人在一个锚标记内使用一个透明的空图像png来在一个div中创建链接,而该图像的大小与div相同。

其实很难过……但它起作用了……

Eugen 6 年前

如果要避免在定位标记内放置分隔符的语义问题,只需将定位标记放置在与分隔符相同的级别上,用一个容器将它们全部包装起来,并使用position:relative,使定位标记position:absolute,然后展开以填充容器。另外,如果它不在内容流的末尾,请确保在其中抛出一个z索引,将其放在内容的上方。

按照建议,我添加了一个标记代码:

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

和CSS:

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

-7

solveig 12 年前

就像FIY一样。

如果你的目标是让你的div点击,你可以使用jQuery/Java脚本。

像这样定义您的分区:

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

然后,您的jQuery将按如下方式实现:

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

这也适用于多个div-根据Tom在本文中的评论