CSS 使 div 在 Firefox 和 chrome 中不相等答案

【问题标题】：CSS makes div unequal in firefox and chromeCSS 使 div 在 Firefox 和 chrome 中不相等
【发布时间】：2015-07-08 20:21:29
【问题描述】：

我用给定的 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 中的视图。我该如何解决这个问题？

【问题讨论】：

请制作小提琴或sn-p来查看问题
在 jsfiddle 或代码编辑器中使用 html 更新代码
没有 HTML，您向我们展示的是您的蜡笔，而不是着色书。
“Segoe UI”周围没有引号，无衬线应该小写。

标签： css google-chrome firefox web

【解决方案1】：

我发现 firefox 在 div 上的工作方式往往不同（我之前知道这一点，但解决方案不清楚），因此我在按钮上添加了 Max-Height 属性，该属性由于正文中的文本大小而扩展，从而修复了问题。

【讨论】：

Firefox 不会以不同的方式处理 div。在别处寻找解决方案。
好吧，有些页面确实显示不同，可能不是 div 问题，但 css 可能是我想说的。无论哪种方式 max-height 都解决了问题，并且据我所知，现在在所有浏览器中都正确显示了页面。