样式似乎在chrome中应用不正确

时间:2013-09-23 01:08:25

标签: css google-chrome less

我使用LessCSS创建一个简单的都市主题网站。我的variables.less文件中包含以下内容:

@unit: 30px;
@tileMargin: 2px;

这在我的mixins.less:

.tile(@xDim, @yDim, @color){
    display: inline-block;
    margin: @tileMargin;
    width: @xDim * @unit + 2 * (@xDim - 1) * @tileMargin;
    height: @yDim * @unit + 2 * (@yDim - 1) * @tileMargin;
    .gradient-bottom-right(@color);
}

.tile-container(@width, @height){
    margin: 0;
    padding: 0;
    height: @height * @unit + 2 * (@height - 1) * @tileMargin + 2 * @tileMargin;
    width: @width * @unit + 2 * (@width - 1) * @tileMargin + 2 * @tileMargin;
}

为了保证单位平方的倍数保持适当的大小,尽管元素边距。然而,当我用两个5x5瓷砖和一个10x5瓷砖实际测试时,我的瓷砖之间会有一个奇怪的间距。

错误示例(为清楚起见,我在容器上添加了边框):

The distance between those boxes is substantially greater than 2 pixels

如果我删除了inline-block语句,则tile将在彼此之间具有正确的间距,但不再与父div的正确关系(突破父级)并且自然不再希望保持在每个之间其他。如何删除这个恼人的间距?我想不惜一切代价避免花车。

编辑:刚刚确认在Firefox中出现同样的问题。

1 个答案:

答案 0 :(得分:0)

inline-block将尊重您在DOM中拥有的任何文本节点(div之间有空格)。尝试将元素放在彼此旁边,没有空格。