这是错误的更改块元素的CSS内联，如果它包含另一个块元素？

StackOverflow https://stackoverflow.com/questions/746531

  •  09-09-2019
  •  | 
  •  

题

，我知道这是错把有关下列内联元素中一个块级元素，但什么？

设想这样有效的标记：

<div><p>This is a paragraph</p></div>

现在添加此CSS：

div {
   display:inline;
}

这产生了这样的内联元件包含一个块元素（DIV变得直列和p是默认块）

的情况

在页面元素是否仍然有效？

如何以及何时我们判断如果HTML是否有效？ - 前或CSS规则应用后

更新：因为我已经了解到，在HTML5是完全有效的把链接标签中块级元素例如：

<a href="#">
      <h1>Heading</h1>
      <p>Paragraph.</p>
</a>

此，如果你想HTML的一大块是一个链接实际上是非常有用的。

有帮助吗？

解决方案

从 CSS 2.1规格：

  

当一个内联框包含一个在流块级框，内联框（和相同的行框内的内联祖先）围绕块级盒断开（和任何块级的兄弟姐妹是连续的或仅由可折叠的空白和/或外的流元件）分离，分割行内框分成两个盒（即使任一侧是空的），一个在块级框（ES）的每一侧。休息前和休息后的线箱封闭在匿名块盒，和块级框成为那些匿名盒同级。当这样一个行内框由相对定位的影响，任何所得的平移也影响包含在内联框的块级框。

     

此模型将适用于下面的例子中，如果下面的规则：

     
p    { display: inline }
span { display: block }
     

用这个HTML文档中使用：

     
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
  <TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
  <BODY>
    <P>
      This is anonymous text before the SPAN.
      <SPAN>This is the content of SPAN.</SPAN>
      This is anonymous text after the SPAN.
    </P>
  </BODY>
     

P元素包含匿名文本之后是块级元素，随后匿名文本的另一块（C2）的一个块（C1）。将得到的箱将是表示身体的块中，含有约C1中，SPAN块框匿名块盒，以及围绕C2另一个匿名块框。

     

的匿名框的属性是从包围非匿名框继承（例如，在正下方的小节标题“匿名块盒”时，一个用于DIV的例子）。非遗传性有其初始值。例如，匿名框的字体从DIV继承，但空间将0。

     要生成

在元件中设置的属性，导致匿名块盒仍适用于盒子和该元素的含量。举例来说，如果边界已在上面的例子中的P元素上设置，边界将被围绕C1绘制（在该行的末尾打开）和C2（在该行的开始打开）。

     

一些用户代理已实施在含有以其它方式，例如块内联的边界，通过包裹内部“匿名线箱”，例如嵌套块，因此周围绘制这样的盒子内联的边界。由于CSS1和CSS2没有定义这种行为，CSS1只和CSS2，只有用户代理可以实现此替代模式，仍然声称符合CSS 2.1的这一部分。该规范发布后，这并不适用于发达的UA。

这是什么你会。显然，行为在CSS中指定，但它是否覆盖了所有的情况下，或跨越现在的浏览器一贯的执行还不清楚。

其他提示

不管它是否有效或无效，该元件结构是错误的。你不要把块元素行内元素里面的原因是使浏览器可以呈现在容易预测的方式中的元素。

即使它不会破坏对HTML或CSS的任何规则，仍它创建如预期不能被渲染的元素。浏览器必须处理的元素，就如同HTML代码是无效的。

在HTML和CSS都将仍然有效。理想情况下，你就不会做这样的事情，但CSS的特定位实际上是用于获取Internet Explorer的双缘错误，而不诉诸有条件的样式或将无效黑客一个方便的（和语法有效，但在语义上没有有效的）方式你的CSS。在（X）HTML比CSS更多的语义价值，所以它是不那么重要的是，CSS在语义上是有效的。在我看来，这是可以接受的，因为它解决了一个恼人的浏览器问题，而无效代码。

在HTML独立于CSS的验证，所以该网页将仍然有效。我相当肯定的是，CSS规范只字未提，要么，但不要引用我的那一个。不过，我会非常小心使用这样的技术，而作为如预期在某些浏览器可能呈现，你需要测试“时间，我没有看到正在作出许多担保。

  

在页面元素是否仍然有效？

“有效”在一个HTML意义上，是; HTML一无所知CSS。

渲染你的浏览器中得到，然而，由CSS规范“未定义”，所以它可能看起来像任何事情。虽然你可能包括针对一个特定的浏览器（如果你知道浏览器是如何呈现这种情况下）CSS黑客攻击这样的规则，它不应该被提供给浏览器一般。

我不知道把我的头顶部，如果这验证了任何规则，但我会建议使用 W3C HTML验证和 W3C CSS验证来确定。希望这是有帮助的！

没有，这是不是一个错误的选择。我们可以按要求使用。

如果有你遵循一个逻辑和你最终实现它这样的，这是没有错的。工作的事情不是“错误的”，只是因为他们是怪异。是的，这是相当不寻常的，但它可以帮助它不是一个错误。这是故意的。 HTML和CSS应该为你服务，而不是其他方式，以便永远不要听取意见，告诉你不要做它只是因为它是丑陋的。

这是典型的调用一个解决方案“无效的”，并建议各地块很长的路要走。有时候，你可以重新考虑你做了什么。但可能有很多原因，你做了什么，他们就不要考虑了。

我使用内部定期内联块这是有效的，它的工作 - 它只是没有在大多数情况下必要的。所以呢。还记得XHTML告诉我们要始终把各地的物业报价（每个人都在喊你，如果你没有！），现在HTML5允许省略他们，如果里面有没有空间。发生了什么奇异的标签之后最后一个斜线？ “
”？来吧。标准改变。但是浏览器继续支持非标准化的东西为好。 CENTER已经过时;我们是在2013年，它仍然有效。表垂直居中？有时，它是唯一的方法。 A内DIV使它徘徊，你的计划？只要继续下去。

关注重要的事情。

我想，（X）HTML是有效的，CSS是有效的。是结果是否有效？是的，如果你想寻找的浏览器。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top