2010-11-24 10 views
8

誰かがこれがうまくいかない理由をご覧ください。 (widthで動作だけではないmin-width`min-width`は` input [type = "button"] `フォームでは機能しませんか?

input[type="button"] { 
    min-width: 100px; 
} 

EDIT:

  • "ボタン" セレクタがwidthで動作清澄、 だけではないmin-width
  • 他の要素と
  • min-width作品だけではありません "ボタン"セレクタ
  • オンオンー クロムe/safari。 IEの問題ではありません。
+0

? – SLaks

+0

IE <= 6を推測していますか? – hunter

+0

これはChrome/safari-min-widthの作品で、ボタンセレクターではない。 – Yarin

答えて

0

min-widthは、旧バージョンのInternet Explorerではサポートされていないか、バグがあります。

compatibility table hereが表示されます。

form要素でmin-widthが使用されている例ですが、widthプロパティも設定することをお勧めします。

<html> 
<head> 
<title>TAG index</title> 

<style type="text/css"> 

.example { 
    width: 100%; 
    max-width: 600px; 
    min-width: 500px; 
} 

textarea { 
    height: 10em; 
} 

</style> 

</head> 

<body> 

<p>minimum width:500px - maximum width:600px</p> 

<form method="POST" action="example.cgi"> 

    <p><input type="text" name="item1" class="example"></p> 

    <p><select name="item2" class="example"> 
    <option value="select1">Select1</option> 
    <option value="select2">Select2</option> 
    <option value="select3">Select3</option> 
    </select></p> 

    <p><textarea name="item3" cols="50" rows="10" class="example"></textarea></p> 

</form> 

</body> 
</html> 
1

はい...それは仕事がそれをこのようにあなたのスタイルを提供しない:最小幅は完璧に動作するはず

input[type="submit"], button, .button, a.actionlink { 
    cursor: pointer; 
    display: inline-block; 
    font-family: "Arial","Verdana","Helvetica","sans-serif"; 
    font-size: 12px; 
    font-weight: bold; 
    min-width: 85px; 
    -moz-outline: 0 none; 
    outline: 0 none; 
    padding-bottom: 7px; 
    padding-top: 7px; 
    text-align: center; 
} 
+8

重要な変更はどれですか? – Blazemonger

2

あなたは最小幅が少なく作るので、あなたはもしかしたら効果を見ることができませんとにかく細かいhtmlコードの例:

<input type="button" style="width:50px;height:5em;min-width:40px;" 
2

私はちょうどこの問題に遭遇しました。 min-widthは動作しますが、デフォルトのbox-sizingのボタンがあるため、期待した結果やうまくいかないと思われる結果が得られない場合があります。border-boxボタンにbox-sizing: content-boxを設定してみてください。

3

this answerを調べているうちに、ボタンのプロパティを変更すると、Chromeのmin-width CSSプロパティも有効になります。また、デフォルトのボタンの背景色のようないくつかの組み込みプロパティも無効にしますので、慎重に使用してください。

0

私はこの問題のように遭遇しました。 ボタンタグを使用していますが、入力しません。

input[type="button"] { 
    min-width:100px; 
} 

- [の変更] - どのブラウザ上>

button { 
    width:auto; 
    min-width:100px; 
} 
関連する問題