如何修复Mozilla上的div - 它在Chrome上正常工作

我附加了一个图像以解决我的问题，发生了什么事情是Firefox给我的图像一个额外的扩展，其中整个事情在谷歌浏览器上正常工作，没有愚蠢底部图像部分。图像被设置为样式的一部分，作为背景图像，灰色位用表格定义。如何修复Mozilla上的div - 它在Chrome上正常工作

http://s8.postimage.org/rc26rtbr7/profile.png

这里的样式代码...

div.frontpage_title { 
    padding: 5px; 
    font-weight: bold; 
    font-size: 12px; 
    background-image: url(../images/frontpage_tab.png); 
    color: #fff; 
}

感谢和问候。

来源

2012-03-15 HighFlyerPL185

眼看HTML代码将也很好.. – 2012-03-15 22:25:51

它看起来像重复，一开始你可以添加'background-repeat：no-repeat;'来阻止，尽管你仍然需要修正高度/填充/边距/某些问题。 – joshuahealy 2012-03-15 22:31:35

设置div的高度。

如果图像高20px， height：10px;/* 20像素-5像素-PX（填充顶部和底部）*/

来源

2012-03-15 22:29:48 daker

我猜你的标题div没有设定高度。这意味着取决于浏览器如何呈现文本，div的高度会有所不同。您可以在您的DIV设置高度解决这一问题：

div.frontpage_title { 

    height: 14px; // Set div height 
    line-height: 14px; // Optional, will vertically center text 

    padding: 5px; 
    font-weight: bold; 
    font-size: 12px; 
    background-image: url(../images/frontpage_tab.png); 
    color: #fff; 
}

的“傻底部图像部分”是你的背景，由于额外的高度重复。您的总高度需要与标签图片的高度相匹配。

另一个选择是让你的标签图像更高，比如说10px。然后，如果您的标签有点高（< 10px），您将看不到重复。您可以将background-repeat设置为none，但这仅仅意味着您将有一个空白而不是重复的图像。

来源

2012-03-15 22:28:33

谢谢，这就像一个魅力！ – HighFlyerPL185 2012-03-15 22:39:03

太棒了，请点击我答案旁边的复选标记。 – 2012-03-15 22:41:16

停止背景重复使用：

background-repeat: no-repeat;

这将停止图象重复，更多here

来源

2012-03-15 22:31:52 RobFos

如何修复Mozilla上的div - 它在Chrome上正常工作

回答

相关问题