Question

我一直在为一个客户端开发一个更新的网站静态版本 - 所有测试和工作正常 - 但是这被合并到我们的开发人员.net构建中 - 渲染的html现在在下拉框之间有空格我的生活，我无法弄清楚为什么。

他们应该有相同的较少编译的CSS和HTML布局我看不出任何差异所以无法理解差异 - 任何人都可以保存我的星期五并对问题有所启发！？

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

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

即它看起来像这样 -

enter image description here

而不是这个 -

enter image description here

因为没有明显的理由我能找到..

Answer 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;会使它们变得更好 - 它们只是略微向左移动，但垂直间距不是{＆1}。一个问题。这可能需要考虑。

Answer 2

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

它试图设置display：block;只需修复初始

CSS / HTML％神秘白空间问题

2 个答案: