CSS / HTML％神秘空白问题答案

【问题标题】：CSS / HTML% Mystery White space issueCSS / HTML％神秘空白问题
【发布时间】：2014-11-28 18:36:06
【问题描述】：

我一直在为客户开发一个更新的静态网站版本——所有测试都经过测试并且工作正常——但随后它被合并到我们的开发人员 .net 构建中——呈现的 html 现在在下拉框和 for 之间有空格我的生活我不知道为什么。

他们应该有相同的更少编译的 CSS 和 HTML 布局，我看不出有任何区别，所以无法理解这些区别 - 谁能拯救我的星期五并阐明这个问题！？

静态工作版本 - http://www.liquidclients.co.uk/landsail/ls5b/tyreResult.html

实时版本有间距问题 - http://landsail.elasticbeanstalk.com/tyreRange

它看起来像这样 -

而不是这样 -

我找不到任何可以解释的原因..

【问题讨论】：

标签： css html

【解决方案1】：

如果您查看源代码，您会发现问题是编译后的版本在 css-select-moz 跨度之间有一个空行。

在你的静态版本中比较这个：

<div class="margFt">
    <span class='css-select-moz  margFt wshare '>
        <select id="test" class="tst" name="test">
            <option value="SelectBoxIt is:" selected>Width:</option>
            <option value="a jQuery Plugin">a jQuery Plugin</option>
            <option value="a Select Box Replacement">a Select Box Replacement</option>
            <option value="a Stateful UI Widget">a Stateful UI Widget</option>
        </select>
    </span>
    <span class='css-select-moz  margFt wshare'>
        <select id="test" class="tst" name="test">
            <option value="SelectBoxIt is:" selected>Profile:</option>
            <option value="a jQuery Plugin">a jQuery Plugin</option>
            <option value="a Select Box Replacement">a Select Box Replacement</option>
            <option value="a Stateful UI Widget">a Stateful UI Widget</option>
        </select>
    </span>
</div>

到您生成的版本：

<div class="margFt">

    <span class='css-select-moz  margFt wshare '>
        <select id="tyre-width"
                data-val="true"
                data-val-required="The WidthUID field is required."
                class="tst"
                name="tyre-width"></select>
    </span>

    <span class='css-select-moz  margFt wshare'>
        <select id="tyre-profile"
                data-val="true"
                data-val-required="The ProfileUID field is required."
                class="tst"
                name="tyre-profile"></select>
    </span>
</div>

这是display:inline-block 元素之间的空白的已知问题。 this article and associated comment 中描述了一些解决方法。我很快尝试了font-size:0 技巧，并且确实解决了它，所以这一定是问题所在。

更新

只是再次播放，而不是将.css-display-moz 设置为display:inline:block;，将其设置为float:left; 会使它们变得更好——它们只是稍微向左移动，但垂直间距不是问题。这可能需要考虑。

【讨论】：

【解决方案2】：

.rhWrap .regForm {
    margin-top: 17px;
    display: initial;
}

它正在尝试设置 display:block;只需用初始修复

【讨论】：