1

私はたくさんのCSSの質問を見てきましたが、私がここで求めていることに対処しているようには見えません。私が1つを逃してだまされた場合は、私を許してください:)

次のようなリンクが散らばっているウェブサイト（asp.net mvc2、c＃）があります。

<a href="<%= Url.Action("Action", "Controller")%>">
    <div class="buttons">
        <button type="button"> Click Me</button> 
    </div>
</a>

これらは Chrome、FF、Safari では問題なく動作しますが、IE9 では動作しません。ボタン自体がリンクをキャンセルしているようです。つまり、リンクはボタンの一番外側の端でのみアクティブになります (存在する場合)。

私はCssにあまり精通していませんが、関連するビットは次のとおりです(問題は他の場所にある可能性があると思いますが...):

    .buttons a, .buttons button{
       display:inline-block;
       text-align: left;
       float:left;
       margin:0 7px 0 0;
       background-color:#f5f5f5;
       border:1px solid #0b0101;
       border-top:1px solid #eee;
       border-left:1px solid #eee;    
       font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
       border-top-left-radius: 3px;
       border-top-right-radius: 3px;
       border-bottom-left-radius: 3px;
       border-bottom-right-radius: 3px;
       line-height:130%;
       text-decoration:none;
       font-weight:bold;
       color:#565656;
       cursor:pointer;
       padding:5px 10px 6px 7px; /* Links */
   }
   .buttons button{
       width:auto;
       overflow:visible;
       padding:4px 10px 3px 7px; /* IE6 */
   }
   .buttons button[type]{
       padding:5px 10px 5px 7px; /* Firefox */
       line-height:17px; /* Safari */
   }

誰かがこれに対する回避策またはハックを知っていますか? ありがとう！

4

2 に答える 2

1

<button>タグ内のタグを使用して何を達成しようとしているのかはわかりません<a>が、有効な HTML ではないため、適切に機能していないことは驚くことではありません。おそらく、一部のブラウザーで機能していることはさらに驚くべきことです。

いずれにせよ、この種のことは必要ありません。<a>タグは、その中に追加の要素を必要とせずに、ボタンのように見えて機能するようにスタイルを設定できるからです。

たとえば、http://www.cssbuttongenerator.com/を参照してください。これは、ボタン テキスト以外に何もないプレーン<a>タグの CSS を生成します。

似たようなチュートリアルやテクニックを備えたサイトは他にもたくさんありますが、基本的なアドバイスとしては、<div>とを削除<button>して、プレーンな<a>タグを使用することです。

それが役立つことを願っています。

于 2012-07-28T08:20:17.867 に答える
0

フィードバックをお寄せいただきありがとうございます。<a>タグでボタンをラップすることが無効だとは思いませんでしたが、確かにそうです。とにかく、これに対する最も簡単な修正は、<a>タグを削除して追加することでした

onclick="window.location.href='<%=Url.Action("Action", "Controller")%>'"

基本的<button>にボタンをリンクに変えます。

于 2012-07-30T12:46:23.357 に答える