首先,我见过这个问题IE Compatibility issue,但我有一个稍微不同的问题:
我有一个跨度,display: block
我想在里面放一个 H2 标签。这在每个(主要)浏览器中看起来都不错吗?
前面提到的链接上的答案是制作 H2 display:inline
,这是我不想要的,我也不想span
用 a替换div
,因为我必须更改很多 CSS。
PS。我不希望我的 HTML 进行验证(使用验证器),我只想让它工作。
首先,我见过这个问题IE Compatibility issue,但我有一个稍微不同的问题:
我有一个跨度,display: block
我想在里面放一个 H2 标签。这在每个(主要)浏览器中看起来都不错吗?
前面提到的链接上的答案是制作 H2 display:inline
,这是我不想要的,我也不想span
用 a替换div
,因为我必须更改很多 CSS。
PS。我不希望我的 HTML 进行验证(使用验证器),我只想让它工作。
当您说“我不希望我的 HTML 进行验证(使用验证器)时,我只想让它工作。” 你犯了一个很大的错误。如果 HTML 未通过验证,则不知道会发生什么。标准的存在是有原因的。
用 div 替换 span,你不需要在 div 上显示块,因为它默认有这个。span 是内联级元素,而 H2 是块级元素。内联元素不能包含块级元素(直到 HTML5,您可以在锚点中包装块级元素)
这将验证,并将工作!
它适用于当前的浏览器(包括旧版本),而且这种情况不太可能改变。像这样的错误很常见,以至于浏览器供应商改变他们的错误恢复机制毫无意义。HTML5 即将强制错误恢复规则。
另一方面,使用span
withdisplay: block
而不是 using有什么意义div
?并且 CSS 应该被编写成它不依赖于标记元素的特定选择,不同的选择可能是有意义的;例如,通常,.foo
是比 . 更好的选择器span.foo
。
对标记或样式表的任何大范围更改都具有导致问题的不可忽略的风险,即使更改是一项如此简单的改进。(例如,全局搜索和替换经常做太多事情,或者遗漏一些东西。)这可能是继续使用无效标记的原因,在实践中风险最小的情况下。
我们可以先解决IE二线问题
h2{}
h2 span{ float:right;}
所有浏览器中的正确方法
<h2><span>sub content</span> Heading</h2>
错误的方式即浏览器
<h2>Heading<span>sub content</span></h2>