Firefox 的 CSS 问题，但在 Chrome 中有效答案

【问题标题】：CSS issue with Firefox but works in ChromeFirefox 的 CSS 问题，但在 Chrome 中有效
【发布时间】：2011-03-25 05:08:00
【问题描述】：

有人可以看看他们是否能找到我正在查看的内容吗？它在 Chrome 10 中运行良好，但在 Firefox 4 中无法运行。假设它看起来像 iPhone 上的键盘。

http://jsfiddle.net/pfqdr/

更新：http://jsfiddle.net/pfqdr/6/ 这是使用固定像素而不是 Chris 建议的百分比。

CSS

@font-face {
    font-family: 'iPhone keyboard';
    src: url(../font/iphone-keyboard.ttf);
}

.iphone-keyboard-taskbar {
  position: absolute;
    width:260px;
    padding:0;
    overflow:hidden;
    border-top:1px solid #3A3D42;
    bottom: 142px;
    background:#757D8A;
  background: -webkit-gradient(linear, left top, left bottom, from(#8c8c8c), to(#414141));
  background: -moz-linear-gradient(top,  #8c8c8c,  #414141);

    box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
}

#iphone-keyboard {
  position: absolute;
    width:260px;
    padding:0;
    overflow:hidden;
    border-top:1px solid #3A3D42;
    bottom: 0;
    background:#757D8A;
    background-image:-moz-linear-gradient(#9098A3, #454f5d);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#9098A3), to(#454f5d));

    box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
}

#iphone-keyboard li {
    text-align:center;
    margin:.5em .1em .25em;
    list-style:none;
}

#iphone-keyboard li:first-child {
    margin-top:.3em;
}

#iphone-keyboard button,
.iphone-keyboard-taskbar button,
#iphone-keyboard button.specialkey:active {
    color:#3A3D42;

    text-decoration:none;
    text-align:center;
    text-shadow:0 1px 1px white;
    font-weight:bold;

    border:0;
    border-top:1px solid rgba(255,255,255,.45);     

    background:#ECEDEF;
    background-image:-moz-linear-gradient(#f8f8f9, #dddfe1);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#f8f8f9), to(#dddfe1));

    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;

    box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
    -moz-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
}

#iphone-keyboard button {
    display:inline-block;
    width:8.6%;
    margin:0 .25%;
    padding:.02em 0 .03em;

    color:black;

    font-size:22px;
    font-family:Helvetica, Arial, sans-serif;
}

#iphone-keyboard button:active,
#iphone-keyboard button.space:active {
    background-image:-moz-linear-gradient(#E2E3E4, #AAADB4);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#E2E3E4), to(#AAADB4));
}

#iphone-keyboard button.specialkey {
    background:#757D8A;
    background-image:-moz-linear-gradient(#7f8792, #535b68);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#7f8792), to(#535b68));
    color:white;
    text-shadow:0 -1px 1px rgba(0,0,0,.5);
}

#iphone-keyboard button.space,
#iphone-keyboard button.return,
#iphone-keyboard button.numbers,
#iphone-keyboard button.last_button {
    font-size:1.04em;
    padding:.25em 0;
}

#iphone-keyboard button.shift,
#iphone-keyboard button.international,
#iphone-keyboard button.backspace {
    font-family:'iPhone keyboard', Helvetica, sans-serif;
}

#iphone-keyboard button.shift,
#iphone-keyboard button.backspace {
    background-image:-moz-linear-gradient(#939ba6, #687180);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#939ba6), to(#687180));
}

#iphone-keyboard button.shift {
    width:12%;
    float:left;
}

#iphone-keyboard button.backspace {
    width:12%;
    float:right;
}

#iphone-keyboard button.numbers {
    width:24.4%;
    margin-right:1.4%;
    float:left;
}

#iphone-keyboard button.last_button {
    width:16.2%;
    float:left;
    margin-right:1.4%;
}

#iphone-keyboard button.space {
    width:59%;
    color:#525c69;

    background-image:-moz-linear-gradient(#dddfe2, #b4b8bf);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#dddfe2), to(#b4b8bf));
}

#iphone-keyboard button.go {
    float:right;
    width:23.9%;
}

.iphone-keyboard-taskbar button {
  float: left;
  margin: 5px 9px 5px 3px;
  font-size: 9px;
  width: 60px;
  height: 23px;
  text-align: center;
  color: #fff;
  text-shadow: none;
  background: -webkit-gradient(linear, left top, left bottom, from(#8c8c8c), to(#414141));
  background: -moz-linear-gradient(top,  #8c8c8c,  #414141);
}

.iphone-keyboard-taskbar button.done {
  float: right;
  margin: 5px 3px 5px 3px;
  width: 40px;
  background: -webkit-gradient(linear, left top, left bottom, from(#91abc6), to(#5a7fab));
  background: -moz-linear-gradient(top,  #91abc6,  #5a7fab);
}

HTML

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" type="text/css" href="sample.css" />
  </head>
  <body>
                <ul id="iphone-keyboard">
                    <li>
                        <button type="button">Q</button>
                        <button type="button">W</button>
                        <button type="button">E</button>
                        <button type="button">R</button>
                        <button type="button">T</button>
                        <button type="button">Y</button>
                        <button type="button">U</button>
                        <button type="button">I</button>
                        <button type="button">O</button>
                        <button type="button">P</button>
                    </li>
                    <li>
                        <button type="button">A</button>
                        <button type="button">S</button>
                        <button type="button">D</button>
                        <button type="button">F</button>
                        <button type="button">G</button>
                        <button type="button">H</button>
                        <button type="button">J</button>
                        <button type="button">K</button>
                        <button type="button">L</button>
                    </li>
                    <li>
                        <button type="button" class="specialkey shift">S</button>
                        <button type="button">Z</button>
                        <button type="button">X</button>
                        <button type="button">C</button>
                        <button type="button">V</button>
                        <button type="button">B</button>
                        <button type="button">N</button>
                        <button type="button">M</button>
                        <button type="button" class="specialkey backspace">B</button>
                    </li>
                    <li>
                        <button type="button" class="specialkey numbers">@123</button>
                        <button type="button" class="last_button">.</button>
                        <button type="button" class="last_button">/</button>
                        <button type="button" class="last_button">.com</button>
                        <button type="button" class="specialkey go">GO</button>
                    </li>
                </ul>
  </body>
</html>

【问题讨论】：

标签： html css firefox google-chrome

【解决方案1】：

看起来 FF 和 Chrome 处理小数百分比的方式不同。如果您将 #iphone-keyboard 按钮宽度的 css 更改为 px 值，您可能能够找到适用于两种浏览器的合适媒体。

旧：

#iphone-keyboard button {
    display:inline-block;
    width:8.6%;
    margin:0 .25%;
    padding:.02em 0 .03em;

    color:black;

    font-size:22px;
    font-family:Helvetica, Arial, sans-serif;
}

新：

#iphone-keyboard button {
  display:inline-block;
  width:20px;
  margin:0 .25%;
  padding:.02em 0 .03em;
  color:black;
  font-size:22px;
  font-family:Helvetica, Arial, sans-serif;

}

【讨论】：

同意。 Go 按钮也需要修复。我已经调整了jsfiddle.net/pfqdr/5
感谢 Chris，我已在修订版中添加了更新的 jsfiddle 链接。 FF 现在看起来更好，但我无法让最后一行在按钮之间有均匀的空格。
@Luke：谢谢，但这对我来说似乎在 FF 中有同样的问题。 P 按钮被包裹到下一行。