0

:before 要素と :after 要素を使用してボタンをまとめましたが、IE10/9 はそれらを完全に無視しています。少なくともこれら 2 つのバージョンでは完全に機能するはずです。

.buttonSML {
    background-position:-35px -432px;
    background-color: transparent;
    border: none;
    text-transform: uppercase;
    font-size: 2.9rem;
    font-weight: @font-bold;
    height: 55px;
    padding: 0 5px;
    position: relative;
    .text-shadow(0,0,4px);
    cursor: pointer;
}

.buttonSML:before, .buttonSML:after {
    content: " ";
    position: absolute;
    top: 0;
    height: 55px;
    width: 20px;
    display: inline-block;
    visibility: visible
}

.buttonSML:before {
    background-image: url('../images/sprite.png');
    background-position: 0px -432px;
    background-repeat: no-repeat;
    background-color: transparent;
    left: -20px;
}

.buttonSML:after {
    background: url('../images/sprite.png');
    background-position: -394px -432px;
    background-repeat: no-repeat;
    background-color: transparent;
    right: -20px;
}

最終結果を確認できるように jsfiddle を追加しましたhttp://jsfiddle.net/7D4kG/1/

よくわからないので、アドバイスをいただければ幸いです。

4

2 に答える 2

1

いくつかの作業の後、2つの解決策が見つかりました。

最初はjqueryの助けを借りて、置き換えて追加することができます

$('#button-id').click(function ()
{
$('#form-id').submit();
});

うまく機能しますが、HTML5 フォームの検証が失われます。

検証を維持するには、jquery をスキップして、ボタン スタイルに「overflow: visible」を追加するだけです。これまでのところ IE10 でしかテストしていませんが、後で再公開するときに残りをテストします。

于 2013-08-15T09:36:42.380 に答える