0

我有以下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 中被切断的原因给我建议吗？

4

2 回答 2

2

编辑：好的有几个原因

第一个问题是高度、宽度和行高的问题。

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

例如，如果您的文本大小为 15 像素，那么 Firefox 的 15 像素要比 Chrome 大。

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

您还应该使用 px 或 em 而不是 rem，这只是一个提示。

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

注意 2：要将字体文件上传到 cufon 以创建 cufon 字体文件，只需进入C:\Windows\Fonts\并找到您要使用的字体（即Arial）并将其复制到您的桌面。然后将该字体文件上传到 cufon 网站进行托管。如果您希望不同的字体与 cufon 一起使用，您还可以从 google 字体或其他网站下载字体文件。

概括：

问题 1： line-height extends height
问题 2：填充错误
问题 3： firefox 制作不同大小的文本。使用 cufon 来规避问题
问题 4：需要 padding-before hack
问题 5：需要 box-sizing hack。这可以防止将填充添加到宽度中。
问题6：需要专门将css设置为按钮，以防万一。

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

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

page.html

<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>

样式.css

#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;
}

脚本.js

Cufon.replace('#two', { fontFamily: 'Arial' });
于 2013-10-17T14:14:44.940 回答
-1

这是因为这两行：

 padding: 0.4rem;
 height: 1.4rem;

对于那个高度来说，填充太多了。

尝试这个

padding: 0;
height: 1.5rem;
于 2013-10-17T14:07:53.633 回答