css – 如何停止在浏览器中呈现的内联块空格

前端之家收集整理的这篇文章主要介绍了css – 如何停止在浏览器中呈现的内联块空格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
粗略地说,尝试构建一个四列布局,我有这个 HTML
<div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
</div>

我有这个CSS:

div {
    background: #ccc;
}

div div {
    background: #eee;
    display: inline-block;
    width: 25%;
}

– > Fiddle me this< - 当在浏览器中呈现时(目前,我一直在使用Chrome进行测试),渲染嵌套div元素之间的空白(在此示例中,空格是由换行符引起的),从而抛出我的布局. 显然,我可以浮动我的嵌套div …

div {
    background: #ccc;
}

div div {
    background: #eee;
    width: 25%;
    float: left;
}

– > Fiddle me that< - 但后来我的容器div崩溃了,我不想必须使用CSS clearfix hacks或额外的HTML来打开它. 或者,我可以修改我的HTML,以便删除空格…

<div><div>A column</div><div>A column</div><div>A column</div><div>A column</div></div>

但这使得它难以使用.打破标签以使其变得更具可读性的另一种选择让我感觉很脏……

<div>
    <div>A column</
    div><div>A column</
    div><div>A column</
    div><div>A column</div>
</div>

我发现了一个resourcetwo(我没有在SO上找到任何东西),但我不喜欢任何解决方案 – 它们都是变通方法,如果必须,我会很乐意,但肯定会有另一种选择吗?

所以我的问题是……有一个跨浏览器,符合w3c标准,非javascript,无黑客,整洁的HTML,防止HTML空白在浏览器中呈现时使用display:inline-block ?或者是否可以使用没有令人不快的副作用的内联块的替代方案?

编辑

假设这确实是不可能的,那么最好的解决方案就是不需要添加HTML标记和“灵活”的CSS.换句话说,网站管理员可以正常编辑HTML而不考虑破坏布局,而CSS(黑客或其他)将容纳网站管理员的修正,而无需自行修改.

我的“办公室”

好吧,它看起来像是要给予的东西.在我的情况下,拥有不需要额外标记的HTML更为重要,因此最好的解决方案是在“无法正常工作”的CSS黑客中工作.解决方案是浮动嵌套的div并添加一个hack …

div div {
    float: left;
}

div::before,div::after {
    content: "";
    display: table;
}

div::after {
    clear: both;
}

div {
    *zoom: 1;
}

…这是我已经使用了一段时间并且希望避免的修复的推导.修复程序的这个修复版本是在on this site找到的.

所以现在标记中的每个div都已经应用了clearfix hack,无论它是否需要它.我还没有通过应用于所有div来了解它是否有任何不良副作用 – 我期待在任何问题浮出水面时进行调试和修复;-)

解决方法

您为这个大布局问题提供了几乎所有可能的解决方案.我只想指出我的首选解决方案.

将font-size设置为父级为0并使用REM再次重置它.

如果父div(而不是子div)中没有其他文本,则您的代码和布局没有问题.

REM(相对EM)与父元素的字体大小(如普通EM的大小)无关,而是相对于文档的根元素 – html元素.

HTML:

<div class="parent">
    <div class="child">column 1</div>
    <div class="child">column 2</div>
    <div class="child">column 3</div>
    <div class="child">column 4</div>
</div>

CSS:

html {
    font-size: 1em;
}

.parent {
    font-size: 0;
}

.child {
    display: inline-block;
    font-size: 16px; /* Add pixel-based font-size to support IE8 and below */
    font-size: 1rem; /* Don't use rem along with the font-shorthand to avoid problems in IE9/10 - see note below */
    width: 25%;
}

没有浏览器支持

> IE8及以下:添加基于像素的字体大小以使其工作.> IE9 / 10:不使用font-shorthand;请改用font-size!>(Opera Mini& iOS 3.2)

原文链接:https://www.f2er.com/css/242359.html

猜你在找的CSS相关文章