火狐風格形式完全不同

Question

我有一些麻煩與FireFox（在Mac上，我假設Windows是相同的）。基本上，我正在做一個待辦事項清單的網絡應用程序，並且您的待辦事項填寫的表單在我迄今爲止測試過的每個瀏覽器上都能正常工作，除了FireFox。

我的文本框的高度較高，我的提交按鈕表示「提交查詢」出於某種原因，我的緊急按鈕（樣式相同）的寬度與提交按鈕的高度不同&。而且，當任一按鈕被點擊時，它會跳回到頁面的「登陸」部分。

頁面的鏈接是：to-do-today.com

這裏的窗體的HTML：

<form id="to-do-form" method="post" onsubmit="return validateForm()"> 
<div class="form-text-fields"> 
    <input type="text" name="title" id="td-title" class="text-input" required="required" 
    title="Enter your to-do" value="What do you need to do?" onClick="selectAll('td-title');" /> 

    <input type="text" name="description" id="td-description" class="text-input" 
    title="Enter your description" onClick="selectAll('td-description');" value="Need a description?" /> 
</div> 

<div class="form-buttons"> 
    <input type="checkbox" name="urgent" id="urgent" title="Urgent?" class="check-box"/> 
    <div class="button check-box-button" style="margin-bottom: 5px;"> 
    <label class="check-box-label" for="urgent">Urgent?</label> 
    </div> 

    <input type="submit" id="submit" class="button button-margin" /> 
</div> 
</form> 

這裏是一個的控制它的CSS：

form { 
overflow: hidden; 
margin: 0 auto 10px; 
} 
.form-text-fields { 
float: left; 
width: 84%; 
} 
.form-buttons { 
float: right; 
width: 14%; 
margin-right: 1% 
} 
.text-input { 
width: 100%; 
height: 25px; 
float: left; 
padding: 5px; 
border: 1px solid rgba(0,0,0,.23); 
border-radius: 3px; 
margin-bottom: 5px; 
color: #a6a6a6; 
background-color: #fff; 
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
      Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
font-size: .9em; 
} 
.button { 
width: 100%; 
height: 25px; 
margin-right: 1%; 
padding: 5px; 
float: right; 
font-family: "adelle"; 
font-weight: bold; 
font-size: .9em; 
text-transform: uppercase; 
line-height: .9em; 
text-shadow: 1px 1px 2px #945000; 
color: #fffefc; 
background-color: #ffb258; 
border: 1px solid #9f5908; 
border-radius: 3px; 
-webkit-appearance: none; /*stops default styling of buttons on iOS and Andriod.*/ 
-moz-appearance: none; 
} 
.button:hover { 
background-color: #e19033; 
border: 1px solid #804b0a; 
-moz-transition: .1s ease-in; -webkit-transition: .1s ease-in; -o-transition: .1s ease-in; 
} 
.button:focus { 
background-color: #1ccc13; 
border: 1px solid #10800a; 
-moz-transition: .1s ease-in; -webkit-transition: .1s ease-in; -o-transition: .1s ease-in; 
} 
.check-box { 
position: absolute; 
top: -9999px; 
left: -9999px; 
} 
.check-box-label { 
height: 25px; 
min-width: 100%; 
color: #797879; 
display: block; 
text-align: center; 
color: #fffefc; 
} 
.check-box:checked ~ .check-box-button { 
background-color: #9d1878; 
/*background-color: #c67110 !important;*/ 
box-shadow: inset 0px 0px 10px #750055; 
} 

任何想法，爲什麼火狐ISN不喜歡這種形式？ 謝謝！

Answer 1

Firefox不喜歡這種形式，因爲它不解析box-sizing。現在，您需要使用您的global.css供應商特定的一個：

* { 
    -moz-box-sizing: border-box; 
} 

Answer 2

首先，標籤不是按鈕。按鈕（和一些輸入元素）是按鈕。拋開語義和網絡標準，標籤和輸入如何應用你的填充（在類按鈕上）是完全不同的。輸入將填充放入指定的25px高度。標籤將它放在高度的頂部。 （因此，高度遠大於25px。）另外，如果添加25px的行高，則文本將在標籤中垂直居中。