2

FireFox で少し問題があります (Mac では、Windows も同じだと思います)。基本的に、To Do リスト Web アプリを作成しています。ToDo を入力するフォームは、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

まず、ラベルはボタンではありません。ボタン (および一部の入力要素) はボタンです。セマンティクスと Web 標準は別として、ラベルと入力が (クラス ボタンに) パディングを適用する方法はまったく異なります。入力は、割り当てられた高さ 25px 内にパディングを配置します。ラベルは高さの上に置きます。(したがって、高さは 25px よりもはるかに大きくなります。) また、25px の行の高さを追加すると、テキストはラベルの垂直方向の中央に配置されます。

于 2012-11-29T20:33:20.813 に答える
0

Firefox はこの形式を好ましくありませんbox-sizing。今のところ、次のベンダー固有のものを使用する必要がありますglobal.css。

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