html – 3个inline-block div,正好33%的宽度不适合父级

html – 3个inline-block div,正好33%的宽度不适合父级,第1张

概述这是一个常见的问题,但我不知道为什么会这样。 我有一个父div,里面的div我有3个div,宽度设置为33%(完全不是33.3%!)并显示:inline-block。 在Chrome中,它的效果很好,但是在Mozilla和Opera中它并没有(我还没有在IE中测试)。我认为问题可能在算法浏览器中用来计算像素大小的百分比。但是当我检查DOM指标时,我发现父项的宽度是864px,孩子的是285px(这 这是一个常见的问题,但我不知道为什么会这样。

我有一个父div,里面的div我有3个div,宽度设置为33%(完全不是33.3%!)并显示:inline-block。

在Chrome中,它的效果很好,但是在Mozilla和Opera中它并没有(我还没有在IE中测试)。我认为问题可能在算法浏览器中用来计算像素大小的百分比。但是当我检查DOM指标时,我发现父项的宽度是864px,孩子的是285px(这是正确的:864 * .33 = 285.12)。但为什么不适合父母呢? 285 * 3 = 855,比父母的宽度小9px!

哦,是的,填充,边距和边框的所有div设置为0和DOM指标确认。

解决方法 HTML空间中的源代码

在HTML源代码中,当您有文本或图像行或内嵌块的元素时,如果它们之间有空格(空格,制表符或新行),则会在单个空格字符之间添加一个空白字符他们在页面呈现时。例如,在以下HTML中,四个内容之间将出现一个空格:

onetwo<img src="three.png"/><span >four<span>

这对于文本行以及出现在文本行内的小图像或HTML元素非常有帮助。但是,当将内联块用于布局目的而不是在文本段落内添加内容时,会成为问题。

删除额外的空间

避免在内嵌块元素之间添加的额外4px左右的空间的最安全的跨浏览器方式是删除HTML标签之间的HTML源代码中的任何空格。

例如,如果你有一个ul与3个浮动li标签:

<-- No space,tabs,or line breaks between </li> and <li> --><ul>    <li>...</li><li>...</li><li>...</li>   </ul>

不幸的是,这损害了网站的可维护性。除了使代码不可读,它严重损害了数据和格式的分离。

如果另一个程序员以后出现,并决定将每个li标签放在源代码中的单独行上(不知道标签为何在同一行上,或者可能通过HTML TIDy运行,甚至没有机会注意到任何相关的HTML评论),突然网站有一个可能难以识别的格式错误。

考虑浮动元素

空白行为强烈地表明,使用内联块进行一般布局的目的可能不合适,可以将其用于除文本段落内的内容之外的任何内容。

此外,在某些情况下,内嵌块内容非常难以完全风格和对齐,尤其是在旧版浏览器上。

快速总结其他解决方案

>将关闭标签放在与下一个打开的标签相同的行上,它们之间没有空格。
>使用HTML注释来填充关闭标签和下一个打开标签之间的所有空格(如@Arbel建议的)。
>向每个元素添加一个负的左边距(通常为-3px或-4px,基于Font-size)。我不推荐这个特别的方法。
>将容器元素的Font-size设置为0或0.01em。这在Safari 5中不起作用(不确定后续版本),并且可能会干扰响应设计网站,或任何使用除px以外的字体大小单位的网站。
>使用JavaScript或jquery从容器中删除仅空白的文本节点。这在ie8和更早版本中不起作用,因为当元素之间只有空格时,文本节点不会在这些浏览器中创建,尽管元素之间仍然添加了空格。
>为容器设置字母间距和字间距(建议为@Phillipwills)。 Further info.这需要在网站上标准化em大小,这可能不是所有网站的合理选择。
>添加文本空间崩溃:丢弃;到容器(以前称为空白 – 空间崩溃)。不幸的是,任何浏览器都不支持this CSS3 style,而且还没有完全定义标准。

总结

以上是内存溢出为你收集整理的html – 3个inline-block div,正好33%的宽度不适合父级全部内容,希望文章能够帮你解决html – 3个inline-block div,正好33%的宽度不适合父级所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1113009.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存