0

マスター ページで jquery メニューを使用していますが、メニューは順序付けられていないリストで構築されています。各 li の中には、アンカー タグがあります。このアンカー タグ内には、イメージ タグといくつかのスパンがあります。

さて、メニューの仕組みは、リスト項目の上にカーソルを置くまではテキストのみ (境界線や背景色なし) を表示するというものです。カーソルを合わせると、イメージとスパンが露出して表示されるようになります。すべてがうまく機能し、すべてが IE8 で正確に表示されますが、Chrome または Firefox でサイトを実行すると、各リスト項目が薄い灰色のボックスで表示されます。これは問題ないように見えますが、これは私の望む効果ではありません。これはアンカーに直接関係していると思いますが、標準の CSS トリックはどれも機能していません。リスト項目の 1 つからアンカー タグを削除しようとしましたが、確かに、そのリスト項目の境界線がなくなりました。残念ながら、そのハイパーリンクが必要です。img タグには src 属性があり、それが定義されており、正しいイメージをプルしています。CSS(site.masterページのHEADにある)で、

        text-decoration:none;
        border-style:none;
        border:none;
        outline:none;

また、border="0" を IMG に直接追加しようとしましたが、うまくいきませんでした。ボーダーが消えるのを見たのは、アンカータグを削除したときだけです。

私はこれにこだわっています。どんな助けでも大歓迎です!

簡単に説明すると、メニュー項目の 1 つがコードで次のように表示されます。

<ul id="sdt_menu" class="sdt_menu">
            <li>
                <a href="#">
                    <img src="images/1.jpg" border="0" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">the island</span>
                        <span class="sdt_descr">About</span>
                    </span>
                </a>
                <div class="sdt_box">
                        <a href="#">Airlines</a>
                        <a href="#">Travel Info</a>
                        <a href="#">Currency</a>
                </div>
            </li>

スタイルシートは次のとおりです。

ul.sdt_menu
{
    position: absolute;
    top: 148px;
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:968px;
    border: 0px;
}
ul.sdt_menu a{
    text-decoration:none;
    outline:none;
    border: 0px;
}
ul.sdt_menu li{
    float:left;
    width:161px;
    height:85px;
    position:relative;
    cursor:pointer;
    text-decoration:none;
    outline:none;
    border:0px;
}
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:161px;
    height:85px;
    z-index:12;
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
    text-decoration:none;
    outline:none;
    border:0px;
}
ul.sdt_menu li a img{
    border:none;
    text-decoration:none;
    outline:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:0px;
    width:161px;
    height:60px;
    z-index:15;
    border:none;
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:161px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
    border:none;
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:15px;
    text-transform:uppercase;
    text-decoration:none;
    outline:none;
    border:none;
}
ul.sdt_menu li span span.sdt_link{
    color:#333333;
    font-size:24px;
    float:left;
    clear:both;
    text-decoration:none;
    outline:none;
    border:none;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0066FF;
    float:left;
    clear:both;
    width:155px; /*For dumbass IE7*/
    font-size:12px;
    letter-spacing:1px;
    text-decoration:none;
    outline:none;
    border:none;
}
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:161px;
    overflow:hidden;
    height:161px;
    top:85px;
    left:0px;
    display:none;
    background:#000;
    z-index:100;
    text-decoration:none;
    outline:none;
    border:none;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0066FF;
    text-decoration:none;
    outline:none;
    border:none;
}
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:5px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#666666;
}
4

1 に答える 1

0

スタイルシートを投稿していただきありがとうございます。表示されている灰色の「境界線」は、次のルールによるものです。

ul.sdt_menu li > a {
  -moz-box-shadow:0px 0px 2px #000 inset;
  -webkit-box-shadow:0px 0px 2px #000 inset;
  box-shadow:0px 0px 2px #000 inset;
}

http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspxによると、IEはIE9までボックスシャドウのサポートを追加しませんでした。そのため、 IE8のシャドウ。

于 2011-11-01T16:15:30.553 に答える