CSS / HTML%Mystery空白问题 [英] CSS / HTML% Mystery White space issue
问题描述
我一直在为一个客户端的网站更新的静态版本 - 所有测试和工作正常 - 但这是然后合并到我们的开发人员.net构建 - 呈现的html现在在下拉框之间有空格我的生活我无法弄清楚为什么。
他们应该有相同较少编译的CSS和HTML布局我看不到任何差异,所以不能理解的差异 - 谁可以保存我星期五,并对这个问题发出一些光!
静态工作版本 - 中介绍了一些解决方法。我很快尝试了 font-size:0
这个问题已经解决了,所以这一定是问题。
UPDATE
只是重新播放,而不是设置 .css-display-moz
到 display:inline:block; ,将其设置为
float:left;
到左边,但是垂直间距不是问题。这可能需要考虑。
I have been working on an updated static version of a website for a client - all tested and works fine - but this was then merged into our developers .net build - the rendered html now has spaces between the drop down boxes and for the life of me I cant figure out why.
They should have identical less compiled CSS and HTML layout I cant see any difference so cannot understand the differences - can anyone save my Friday and shine some light on the issue!?
Static working version - http://www.liquidclients.co.uk/landsail/ls5b/tyreResult.html
Live Version with spacing issues - http://landsail.elasticbeanstalk.com/tyreRange
ie it looks like this -
rather than this -
for no explicable reason that i can find..
If you do a View Source, you can see the issue is that the compiled version has a blank line between the css-select-moz
spans.
Compare this in your static version:
<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>
To your generated version:
<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>
This is a known problem with whitespace between display:inline-block
elements. There are some workarounds shown described in this article and associated comment. I quickly tried the font-size:0
trick and that did fix it, so this must be the issue.
UPDATE
Just playing again, rather than setting .css-display-moz
to display:inline:block;
, setting it to float:left;
renders them much better - they just move slightly to the left but the vertical spacing isn't an issue. This may be something to consider.
这篇关于CSS / HTML%Mystery空白问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!