1
ログインフォームの丸い角に私の最初の試みがあります。ちょうど今レイアウトをやっているが、IE7のトラブルがいくつかある。条件文の使用を避けようとしていますが、Firefox 3.5で完全に表示することはできますが、IEはログインボタンの左右に大きなマージンを作成するように見えます。私はこれを可能な限り最良の方法で構成しているわけではないかもしれないので、コミュニティからの少しの洞察を探しているかもしれません。私の問題のほとんどは、示された方法を使ってコーナーに丸めようとした後に始まりました。私の目標はIE6/7との互換性です。IEのボタン要素に余りにも多くの余白があると、Firefoxで完璧に見えます
<div id="credentials">
<div id="credsheader"><div id="tr"> </div></div>
<input type="text" class="blurred" id="username" value="USERNAME" />
<input type="password" id="password" class="blurred" value="PASSWORD" />
<button type="submit" id="login"><img src="./images/login.png" alt="Submit" /></button>
<div id="credsfooter"><div id="bl"> </div></div>
</div>
div#credentials{
position: absolute;
right: 10px;
top: 10px;
background-color: #666;
padding: 0px 5px;
}
div#tr{
float: right;
background: url('../images/tr.png');
background-repeat: no-repeat;
cursor: default;
}
div#bl{
float: left;
background: url('../images/bl.png');
background-repeat: no-repeat;
cursor: default;
}
#credsfooter{
position: absolute;
bottom: 0px;
left: 0px;
height: 6px;
}
#credsheader{
position: absolute;
top: 0px;
right: 0px;
height: 6px;
}
#username{
font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
font-size: 8pt;
padding: 3px;
margin: 8px 3px;
vertical-align: middle;
}
#password{
font-size: 8pt;
padding: 3px 3px 4px 3px;
margin: 8px 17px 8px 3px;
vertical-align: middle;
}
input.blurred{
color: #AAA;
}
input.focused{
color: #000;
}
#login{
background: transparent;
border: 0px;
padding: 4px 0px 2px 0px;
margin: 0px -12px;
cursor: pointer;
vertical-align: middle;
}
IEには、 "ボタン"要素に重大な機能（フォーマットではない）のバグがあることに注意してください。押されたかどうかに関わらず、ボタンの値を送るのと同じように、フォームの処理ではユーザーが何をしたかを知ることができません。あなたの状況に何の違いもないかもしれません（もしあなたが一つの送信ボタンしか持っていなければ、フォームが十分な情報であるという事実です）が、一般的にinput type = "submit"に固執するのが最良です。 – Martha