Question

我用给定的css制作了两个用于导航的div：第一个按钮：

.OptionsButton .DropDownButtonOverlay
{
    margin: 0px -95px 0px 0px;
    width: 92px;
    height: 38.5px;
    float: right;
    z-index: 2;
}



.tenPxLeft
{
    margin-left: 10px;    
}

.floatRight
{
    float: right;
}

.regularButton
{
    background-color: #008BE1; 
    border: none;
}

.optionsButton
{
    border-radius: 3px;
    -webkit-appearance: none;
}

，第二个按钮如下：

.defaultButton
{
    font-family: 'Open Sans', Segoe UI, Verdana, Helvetica, Sans-Serif; 
    border-radius: 3px;
    font-size: 14px;
    color: #FFFFFF; 
    padding: 10px 15px;
    -webkit-appearance: none;
    margin: 0; /* fixes chrome bug */
}

.tenPxLeft
{
    margin-left: 10px;    
}

.floatRight
{
    float: right;
}

.regularButton
{
    background-color: #008BE1; 
    border: none;
}

我正在处理的问题是它们在Chrome和IE上看起来很好（很好地排列）。然而，当我去firefox时，他们并没有得到所有的意图（我将它们作为顶级菜单放在另一个div中）。

看起来字体正在影响它。我已经尝试按百分比（100.01％）制作字体，但它在firefox中看起来不错，但随后在IE和Chrome中破坏了视图。我怎么能解决这个问题？

Answer 1

我发现firefox在div上的工作方式不同（之前我就知道了，但解决方案还不清楚），因此我在按钮中添加了Max-Height属性，因为文本大小在其中扩展了修复问题的身体。

CSS使得firefox和chrome中的div不相等

1 个答案: