2

我在使用 FireFox 时遇到了一些麻烦（在 Mac 上，我假设 Windows 是一样的）。基本上，我正在制作一个待办事项列表 Web 应用程序，您填写的待办事项表格在我迄今为止测试过的所有浏览器上都可以正常工作，除了 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;
}

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

4

2 回答 2

0

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

于 2012-11-29T20:33:20.813 回答
0

Firefox 不喜欢这种形式，因为它不解析box-sizing. 现在，您需要在您的global.css:

* {
  -moz-box-sizing: border-box;
}
于 2012-11-29T20:55:32.163 回答