0

IE9で少し問題があり、それを理解できません。線形グラデーションのCSSでボタンを作成しています。これは、Chorme、Firefox、Safariで完全に表示されますが、IE9では表示されません。

http://ubizzo.co.uk/img/ie9.png

http://ubizzo.co.uk/img/ch-fi-sa.png

最初の画像リンクはIE9、2番目の画像リンクは他のすべてのブラウザです。これを機能させる唯一の方法は、以下のようにcssにfloat:leftまたはfloat:rightを追加することですが、それは明らかにレイアウトを台無しにします。 float:noneを使用しようとしましたが、それも機能しません。競合するcssを除外するために、空白のhtmlファイルでこれを試しましたが、それでも機能しません:-s

.purchase {
    margin-top: 5px;
    display: block;
    width: auto;
}

.purchase a {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 10px;
    cursor: pointer;
    border: none;
    color: #fff;
    line-height: 1em;
    width: auto;
    **float: left;**
    border-image: initial;
    text-align: center;


    border: solid 1px #189199;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    background: -moz-linear-gradient(top, #19d7e3, #12A4B3);
    background: -webkit-gradient(linear, left top, left bottom, from(#19d7e3), to(#12A4B3));
    background: -moz-linear-gradient(top, #19d7e3, #12A4B3);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#19d7e3', endColorstr='#12A4B3');
}

.purchase a:hover {

    background: -moz-linear-gradient(top, #12A4B3, #19d7e3);
    background: -webkit-gradient(linear, left top, left bottom, from(#12A4B3), to(#19d7e3));
    background: -moz-linear-gradient(top, #12A4B3, #19d7e3);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#12A4B3', endColorstr='#19d7e3');

    color: #ffffff;
}

助けてくれてありがとう、アダム。

http://jsfiddle.net/gdmP8/-float:left / rightを追加した場合にのみ、ボタンが表示されることに注意してください

4

3 に答える 3

3

このCSSを適用すると、Chrome、Firefox、Safari、Opera、IE-7、IE-8、IE-9をチェックインしているすべてのブラウザで動作します。

background: #12a4b3; /* Old browsers */
background: -moz-linear-gradient(top,  #12a4b3 0%, #19d7e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12a4b3), color-stop(100%,#19d7e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* IE10+ */
background: linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12a4b3', endColorstr='#19d7e3',GradientType=0 ); /* IE6-9 */
于 2012-06-13T10:10:49.767 に答える
0

IE 9のフロートの問題は、通常、ヘッダーの不良が原因です。これで確認してください:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

オーバーフローのあるIE9フロートから取得:非表示でテーブル幅が100%正しく表示 されない(重複しているかどうかわからない)

そして、おそらく現在の標準を使用する必要がありますlinear-gradient(または、少なくとも-ms-linear-gradient-o-linear-gradientmozおよびwebkit固有のグラデーションを使用する代わりに)。

于 2012-06-13T09:44:28.967 に答える
0

Operaでも同じ問題が発生しますが、IEの単純なボタン画像のロールオーバーに固執してみませんか?

于 2012-06-13T09:45:00.953 に答える