IE8のボタンレイアウトの問題

Question

私の検索は右側にGoという名前のボタンがあります。IE8以外のすべての現代のブラウザで正しい場所にあります（IE7とIE6では悪夢ですが気にしませんそれらのブラウザ）。 私はいくつかのことを試みたが、ボタンが、そう ここで私はここでhttp://content.screencast.com/users/cryoffalcon/folders/Jing/media/92fc0c87-44ac-4c7a-9af5-d8d5824ef85d/go%20button.png

は、デモページhttp://bloghutsbeta.blogspot.com/2012/03/testing-3.html とあればある何を意味するかを示すための画像である理由誰かが私に言うことができるIE8でその場所に来ていません

.formbox { 
background:#434445; 
border-top-color:#0f0f0f; 
border-top-style:solid; 
border-top-width:3px; 
border-left-color:#0f0f0f; 
border-left-style:solid; 
border-left-width:3px; 
border-right-color:#797d7d; 
border-right-style:solid; 
border-right-width:3px; 
border-bottom-color:#797d7d; 
border-bottom-style:solid; 
border-bottom-width:3px; 
-webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
color:#787D7D; 
font:13px Verdana,Geneva,sans-serif; 
margin: 3px 0 5px 5px; 
padding:1px; 
} 
.formbutton { 
margin:0 5px 5px 0; 
color:#B6E85E; 
text-shadow: 0 0 4px #7F241C, 0 0 4px #7F241C, 
     0 0 4px #7F241C; 
cursor:pointer; 
} 

Answer 1

.formboxと.formbuttonから上下の余白を削除し、両方をvertical-align: top;に設定すると、IE8の問題が大幅に分類されました。その周りに垂直なスペースが必要な場合は、を親のformに移動してdisplay: block;にすることができます。

（conditional classesを使用すると、それは非常に簡単にこれらのようなIE固有の修正をターゲットになります）

Answer 2

あなたが役立つだろうボタンコードのjsfiddleを提供することができた場合：あなたは、CSSでここにCSS を探すためにしたくありません。 IEの開発ツールは私と非常に意思を持って協力していません。私の記憶が役立つならば、両方の入力フィールドに浮動小数点を追加して何が起こるかを見てみてください。このサイトでは、検索で

ルック：それは行って本当に似ていますが、伸縮性のあるものを行うために余分なdivがあります：http://www.genesismedicalimaging.comあなたの新しいをラップするためにあなたのhtml頭に条件文を作成する場合、これは簡単に固定されている

Answer 3

スタイルシートに

<!--[if IE 8]><link rel="stylesheet" href="Css/ie.css" /><![endif]--> 

などを入力し、次のCSSをスタイルシートに挿入してください。これで問題を解決できます。

input.formbutton.buttonbloghuts.buttongradient { 
position: relative; 
top: 8px; 
} 

HTML5要素を作成するための条件文が既にあります。

何か問題がありましたら、お手伝いいたします。