如何停止在浏览器中呈现的内嵌块空白 [英] how to stop inline-block whitespace being rendered in the browser

问题描述

大致来说，尝试建立一个四列布局，我有这个HTML：

Roughly speaking, attempting to build a four-column layout, I've got this 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测试）

When rendered in the browser (Currently, I have been testing with Chrome only) the whitespace between the nested div elements (in this example the whitespace is caused by line breaks) is rendered, thus throwing my layout out.

很明显，我可以浮动我的嵌套div元素（在这个例子中，空白是由换行引起的） ...

Clearly, I can float my nested divs...

div {
    background: #ccc;
}

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

- > 让我知道< -

-> Fiddle me that <-

但是我的容器div崩溃了，我不想有使用CSS clearfix黑客或额外的HTML来打开它。

But then my container div collapses and I don't want to have to have to use CSS clearfix hacks or extra HTML to open it back up.

或者，我可以修改我的HTML，删除空格...

Alternatively I can modify my HTML such that the whitespace is removed...

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

但这使得它很难使用。打破标签，以便它变得更加可读在某种程度上让我感到肮脏...的替代方法...

but that makes it hard to work with. The alternative of breaking the tags so that it becomes more readable somehow leaves me feeling dirty...

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

我发现了一个资源或两个（我没有找到任何东西），但我不喜欢任何解决方案 - 他们都是解决方法，我会如果我必须，但肯定有另一种选择？

I've found a resource or two (I failed to find anything on SO) but I don't really like any of the solutions - they are all workarounds, which I will entertain if I must but surely there's an alternative?

所以我的问题...有一个跨浏览器，w3c兼容，非javascript，黑客 - 免费，整洁的HTML，防止HTML空白在浏览器中呈现时使用 display：inline-block 的方法？

So my question(s)... is there a cross-browser, w3c-compliant, non-javascript, hack-free, tidy HTML, bombproof way of preventing HTML whitespace from being rendered in the browser whilst using display:inline-block? Or is there an alternative to inline-block that can be used that has no unpleasant side effects?

EDIT

假设这是不可能的，最好的解决方案是不需要添加HTML标记和'灵活'的CSS。换句话说，网站管理员可以正常编辑HTML，而不考虑打破布局，CSS（黑客或其他）将适应网站管理员的修正，而不必自己修改。

Assuming that this is genuinely impossible, the best solution would be something that required no addition HTML markup and 'flexible' CSS. In other words, a webmaster could edit the HTML as normal without consideration of breaking the layout, and the CSS (hacked or otherwise) will accommodate the webmaster's amends without having to be amended itself.

MY替代方法

好吧，在我的情况下，更重要的是有一个HTML不需要额外的标记，所以最好的解决方案是工作在CSS黑客只是工作不可见。解决方案是浮动嵌套的div并添加一个hack ...

Well, it looks like something's got to give. In my situation it is more important to have HTML that doesn't require extra markup so the best solution is to work in a CSS hack that "just works" invisibly. The solution is to float the nested divs and add a hack...

div div {
    float: left;
}

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

div::after {
    clear: both;
}

div {
    *zoom: 1;
}

...这是我一直在使用的修复一些时间，希望避免。在此网站上在此网站上找到了此修复程序的succint版本。

...which is a derivation of a fix I've been using for some time and was hoping to avoid. This succint version of the fix was found on this site.

现在每个单独的div在标记已经得到了clearfix hack应用于它是否需要它。我仍然要通过应用到所有 div - 我期待在任何问题出现时调试和修复，以了解这是否有任何不良的副作用 - ）

So now every single div in the markup has got the clearfix hack applied to it whether it needs it or not. I'm yet to learn if this has any bad side-effects by being applied to all divs - I look forward to debugging and fixing when any problems surface ;-)

推荐答案

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

You provided nearly all possible solutions to this big layout question. I just want to point out my preferred solution.

如果父div（而不是子div）中没有其他文本，您的代码和布局就没有问题。

You'll have no trouble with your code and layout if there is no additional text inside the parent div (not the child divs).

REM （相对EM）不是相对于父元素（像正常EM的）的字体大小，而是相对于文档的根元素 - html 元素。

REM's (Relative EM's) are not relative to the font-size of the parent elements (like normal EM's are), but relative to the root element of your document – the html element.

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：与字体 - 速度;

• IE8 and below: Add pixel-based font-size to make it work.
• IE9/10: not working with font-shorthand; use font-size instead!
• (Opera Mini & iOS 3.2)

这篇关于如何停止在浏览器中呈现的内嵌块空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！