我有一个父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%的宽度不适合父级所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)