HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5 doctype导致SPAN标记在顶部和底部之间有一个特殊的间隙大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
以下示例使用 HTML 4.01 Transitional doctype声明,span不会得到顶部和底部间的特殊差距.

HTML@H_675_7@

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="BACkground:red"><span>dark green</span></div>
</body>
</html>

CSS@H_675_7@

span {
    BACkground: yellow;
    color: black;
    font-size: 12px;
    font-family: Arial,sans-serif;
    font-weight: normal;    
}

但是,如果我们将其更改为使用HTML5声明<!DOCTYPE html>,则跨度将获得特殊差距.@H_675_7@

以下是jsfiddle中的完整示例(如果您将小提琴选项的DTD更改为使用HTML5,您将看到问题所在.@H_675_7@

解决方法

这与div元素的“行高”计算方式有关.将div元素的“line-height”设置为与span相同的“font-size”是解决此问题的一种方法.像 this

div { line-height: 12px; }

严格(和HTML5)DOCTYPEs seem to enforce“行高”,好像它是“最小高度”.即使元素中没有任何文本,仍然会应用“line-height”.@H_675_7@

Transitional DOCTYPE在浏览器中触发“几乎标准”模式,基本上是standards mode with a few quirks.@H_675_7@

This page解释了“几乎标准”模式下线高计算的行为:@H_675_7@

大佬总结

以上是大佬教程为你收集整理的HTML5 doctype导致SPAN标记在顶部和底部之间有一个特殊的间隙全部内容,希望文章能够帮你解决HTML5 doctype导致SPAN标记在顶部和底部之间有一个特殊的间隙所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。