软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

html5垂直间距问题

收集整理的这篇文章主要介绍了html5垂直间距问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个布局,其中div之间的垂直间距是像素完美的。到目前为止,我排除了几乎所有的大型网格系统(960.gs,Blueprint),因为它们对于垂直间距没有任何解决方案。使用它们,在div之间设置垂直间距的唯一方法是使用body {line-height}属性并使用它来处理div间距。我不会称之为解决方案,因为它会破坏您的模板,取决于font-family,并且不允许您为不同的div使用不同的间距。

我发现唯一适用于垂直间距的网格系统是Golden Grid,它不使用body {line-height},但是它的垂直间距是自己的.clear {height:5px}。

我的问题是,无论我如何尝试,我无法在HTML5中使间距工作。我在谈论垂直排列的图像,没有间隙。在XHTML过渡模式下,一切工作都非常完美,图像完美对齐,但在HTML5模式下,它们之间有一个垂直的差距。 Chrome的差距为2像素,Firefox中的差距为2-3像素。我认为在HTML5模式下使用时,每个网格系统都是这样。我不知道用普通的HTML5编写这个代码的最好办法是什么,所以我刚刚尝试过网格系统。蓝图也是960.gs的垂直差距。

我发现一个解决方案可能是设置body {line-height:0}并在每个排版标记中定义行高。但是我不明白为什么要这样一个简单的例子是这样一个坏的黑客:垂直排列的图像。为什么HTML5模式下的浏览器与XHTML Transitional模式不同?

在这里,我有相同的页面,没有改变,只是doctype。 XHTML一个在每个浏览器中都是像素完美的,HTML5之间有差距,与浏览器不同。

什么是使HTML5示例的工作方式像XHTML过渡的最佳方法?

更新:三十点回答问题,如果我包括img {display:block; } HTML5版本的行为与XHTML Transitional完全相同。谢谢你三十多岁

但是在关闭这个线程之前,有人可以向我解释为什么是这样的:

为什么所有浏览器在HTML5模式下的行为都不一样,并且在没有指定为display:block时,img元素之间的垂直间距都不同。看看浏览器比较网站上面的html5链接,它将不同于浏览器到浏览器。他们的差距在2到4像素之间。
为什么XHTML Transitional不需要这个黑客
为什么XHTML Strict也产生垂直差距
使用img {display:block; }在一个reset.css表?

解决方法

Why do all browsers behave differently in HTML5 mode and all have different vertical gaps between img elements,when not specified as display: block?

首先,浏览器没有“HTML5模式”。他们有三种模式“怪癖”,“有限怪癖”(又名“几乎标准”)和“标准”模式。 “有限的怪癖”和“标准”模式之间只有一个区别,它涉及对于其中 img的线条框建立线高度和基线的方式。坐镇。在“有限的怪癖”模式下,如果在线上没有呈现的文本内容,则不建立基线,并且 img坐在线框的底部。

在“标准”模式中,即使在该行框中没有真正的字符,行框总是包含像基线下方的g,p和y之类的字符的下降空间。您看到的差距是基线之间的距离并且线框的底部是那些下降的空间。有关详细说明,请参见http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

那么补救措施就是停止 img被视为内联元素{display:block; }或覆盖 img的垂直对齐方式{vertical-align:bottom; }。要么会工作

Why does XHTML Transitional not need this hack

使用XHTML Transitional doctype将浏览器置于“有限的怪癖”模式。如果您使用XHTML Strict或完整的HTML4 Strict doctype,您将会看到与HTML5 doctype所看到的相同的差距,因为浏览器在“标准”模式下都是这些。

Why does XHTML Strict produce a vertical gap too

往上看。

Is it safe to use img { display: block; } in a reset.css sheet?

当然,但是可能有时候你会想要 img被视为内联元素。在这些情况下,您需要在适当的位置添加CSS才能实现。

总结

以上是为你收集整理的html5垂直间距问题全部内容,希望文章能够帮你解决html5垂直间距问题所遇到的程序开发问题。