ボーダースタイルを変更すると、IEとFirefoxでボーダーが丸められなくなりますが、Opera、Chrome、Safariでうまく動作します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 

<style type="text/css"> 
input { 
    border-width: 2px; /* causes button to change dramatically in IE and FireFox */ 
} 

</style> 

</head> 
<body> 
<input type="button" value="Print"/> 
</body> 
</html>

各ブラウザにスタイルなしのボタンを表示させると、例としてボーダースタイルを変更すると、IEとFirefoxでボーダーが丸められなくなりますが、Opera、Chrome、Safariでうまく動作します。

Default Button in IE

、IE 8と、デフォルトの境界幅が2ピクセルです。私がしたことは、境界線の幅を2pxに設定するボタンのスタイルを追加することでした。だから、私は境界の幅を全く変更していません。しかし、ページをリロードすると、ボタンは次のようになります。

Same Button in IE but with stylesheet

私は全くそれを理解していません。私はDeveloper Toolbar、OperaのDevツール、Firebug、SafariのDevツールを見て、それぞれのボタンを分析しました。 FireFoxとIEがボタンを劇的に変えてしまうのはなぜですか？Safari、Chrome、Operaは外観を完全に同じに保ちます。私はなぜボタンが色を変えて、それを失うのか分からず、「丸め」、「正方形」になります。

私はどこでも見ているYUIリセットリンクを追加して、この問題を調査しても助けにはなりませんでした。

私は間違っていますか？

デフォルトのボタン（ Default Button in IE ）のように見た目と気分を保ちながら、同じように見えるように、すべてのブラウザでボタンのボーダー、パディング、マージンを調整したいだけですが、IEとFireFoxはそれを難しくしています瞬間。

ありがとうございます。

出典

2012-01-25 user717236

あなたは 'border-radius：2px;'を追加できます。 – Linas

[this]（http://www.quirksmode.org/css/tests/mozie_button.html）と[this]（http：//リファレンス.sitepoint.com/css/replacedelements） –

[-moz-appearance、-webkit-appearance]（https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance）もチェックしてください。プラットフォームのデフォルトのスタイルを使用します。 –

これは、単にブラウザがボタンをレンダリングする方法の違いです。あなたは何か悪いことをしていません。これは単なるクロスブラウザレンダリングの問題です。それ自体では、デフォルトのボタングラフィックを同じようにレンダリングさせることはできません。

すべてのブラウザでボタンのルック＆フィールを正確にしたい場合は、CSSを使用してボタンを作成することをおすすめします。それはより多くのコードですが、それはあなたが探している正確なコントロールを提供します。

優れたCSSボタンメーカーがいくつかあります。ここに1つあります。

http://css-tricks.com/examples/ButtonMaker/

HTH！ noneに境界線を設定する

出典

2012-01-25 16:12:46

ご協力いただきありがとうございます。 – user717236

は（IE9/IE10に）私の仕事：

border: none;

何もない（すなわち、ボーダー:;）にそれを設定するにも働きました。

出典

2012-08-29 11:39:07 camster

空白の値が有効ではないため、別のものが上になる可能性があります。 –

ボーダースタイルを変更すると、IEとFirefoxでボーダーが丸められなくなりますが、Opera、Chrome、Safariでうまく動作します。

答えて

関連する問題