Question

我在FireFox上遇到了一些麻烦（在Mac上，我假设Windows是相同的）。基本上，我正在制作一个待办事项列表网络应用程序，除了FireFox之外，你用todo填写的表格在我迄今为止测试的每个浏览器上都能正常工作。

我的文本框的高度更高，我的提交按钮由于某种原因显示“提交查询”，我的紧急按钮（样式相同）具有不同的高度＆amp;宽度为提交按钮的宽度。并且，当点击任一按钮时，它会跳回到页面的“着陆”部分。

该页面的链接是：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;
}

任何想法为什么FireFox不喜欢这种形式？谢谢！

Answer 1

首先，标签不是按钮。按钮（和一些输入元素）是按钮。除了语义和Web标准之外，标签和输入如何应用填充（在类按钮上）是完全不同的。输入将填充放在指定高度25px内。标签把它放在高度的顶部。（因此高度远大于25px。）此外，如果添加25px的行高，文本将在标签中垂直居中。

Answer 2

Firefox并不喜欢这种形式，因为它不会解析box-sizing。目前，您需要在global.css上使用特定于供应商的那个：

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

Firefox样式形式完全不同

2 个答案: