Question

我有以下CSS：

html.darkBlue button {
   border-color: #cccccc;
   color: #222222;
   background: linear-gradient(#fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb);
}
.question-marking-buttons button {
   padding: 0.4rem;
   height: 1.4rem;
   line-height: 1.4rem;
   margin-right: 0.5rem;
   float: left;
   width: 4rem;
}

这是我的HTML：

<button>Mark</button>

在Google Chrome中，按钮背景从按钮顶部延伸到底部，如下所示：

xxxxxxxxx
x       x
x Mark  x
x       x
xxxxxxxxx

在Firefox中它看起来像这样：

xxxxxxxxx
x       x
x Mark  x
xxxxxxxxx

有人可以告诉我为什么背景会在Firefox中切断而不是Chrome吗？

Answer 1

编辑：好的几个原因

第一个问题，是高度，宽度和线高的问题。

第二个问题，是因为按钮和div在Firefox和Chrome中的大小不同，只是因为文字大小。 Firefox的文本大小稍大。

例如，如果你的文字大小为15像素，那么Firefox的版本比Chrome的大15倍。

我在自己的网站上修复此问题的方法是使用 cufon 作为文字。由于cufon是外部字体，因此它在Firefox，Chrome和所有其他浏览器上显示完全相同的宽度。这解决了我的菜单栏宽度和按钮宽度跨浏览器问题。

你也应该使用px或em而不是rem，只是一个提示。

注1：我为此示例在yourjavascript.com上托管了必要的cufon文件。但是，您应该在自己的网站上下载这些文件并托管，或者自己从cufon website创建文件，并在您自己的网站上托管文件。

注2：要将字体文件上传到cufon以创建cufon字体文件，只需进入C:\Windows\Fonts\并找到您要使用的字体（即{{1 }}并将其复制到您的桌面。然后将该字体文件上传到cufon网站进行托管。如果你想让不同的字体与cufon一起使用，你也可以从谷歌字体或其他网站下载字体文件。

<强>概要

问题1： line-height延伸高度
问题2：填充错误
问题3： firefox会生成不同大小的文本。使用cufon来规避问题 问题4：需要填充 - 在黑客之前 问题5：需要大小调整黑客攻击。这可以防止填充添加到宽度 问题6：需要专门设置css到按钮，以获得良好的衡量标准。

查看我对jsbin的完成修复：
http://jsbin.com/AxiCiNA/3

代码（与我创建的Arial相同）：

<强> page.html中

jsbin

<强>的style.css

<html>
<head>
<script src="http://yourjavascript.com/319153210071/cufon-yui.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/330149971117/thearialcufonfile.js"></script>
</head>
    <body>
        <button id='one'>Mark</button>
        <button id='two'>Mark</button>
    </body>
</html>

<强>的script.js

#one {
   border-color: #cccccc;
   color: #222222;
   background: linear-gradient(#fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb);
}
button#two {
   padding: 1px 8px;
   margin: 0;
   margin-right: 9px;
   float: left;
   font: 15px 'Times New Roman, Serif';
   height: 25px;
   width: 50px;
   line-height: 10px;
   /* box-sizing hack for chrome */
   -webkit-box-sizing: border-box;
   /* box-sizing hack for firefox */
   -moz-box-sizing: border-box;
   /* box-sizing hack for opera */
   box-sizing: border-box;
   /* padding-before hack for chrome */
   -webkit-padding-before: 1px;
   -webkit-padding-after: 0;
   -webkit-padding-start: 1px;
   -webkit-padding-end: 0;
   /* padding-before hack for firefox */
   -moz-padding-before: 0px;
   -moz-padding-after: 0;
   -moz-padding-start: 1px;
   -moz-padding-end: 0;
   /* padding-before hack for opera */
   padding-before: 1px;
   padding-after: 0;
   padding-start: 1px;
   padding-end: 0;
}

Answer 2

这是因为这两行：

 padding: 0.4rem;
 height: 1.4rem;

那个高度的填充太多了。

试试这个

padding: 0;
height: 1.5rem;

为什么我的按钮背景在Firefox中被切断而谷歌Chrome不被切断？

2 个答案: