Не удается удалить границу из IMG гиперссылки в Chrome или Firefox (работает в IE8) - PullRequest
Новая
       17

Не удается удалить границу из IMG гиперссылки в Chrome или Firefox (работает в IE8)

0 голосов
/ 31 октября 2011

Я использую меню jquery на главной странице, и меню построено с неупорядоченным списком.Внутри каждого ли есть тег привязки.Внутри этого тега привязки есть тег изображения и пара интервалов.

Теперь меню работает так, что вы просто видите текст (без границ или цветов фона), пока не наведите курсор на элемент списка, на которомНаправьте изображение, и пролеты станут видимыми.Все работает отлично, и все отображается точно так, как должно в IE8, но когда я запускаю сайт в Chrome или Firefox, каждый элемент списка отображается в тонкой серой рамке.Хотя это выглядит хорошо, это не мой желаемый эффект.Я предполагаю, что это напрямую связано с привязкой, но ни один из стандартных трюков CSS не работает.Я попытался удалить тег привязки из одного из элементов списка, и, конечно же, граница для этого элемента списка исчезла.К сожалению, мне нужна эта гиперссылка там.Теги img имеют атрибут src, и он определяется и вытягивает правильное изображение.В CSS (который у меня есть в заголовке страницы site.master, у меня установлены следующие атрибуты для «a», «img», «span»): 

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

У меня также естьпопытался добавить border = "0" непосредственно в IMG, но безуспешно. Единственный раз, когда я видел, что граница исчезает, это когда я удаляю якорные теги.с благодарностью!

Просто для удобства вот как выглядит один из пунктов меню в коде: 

<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;
}

1 Ответ

0 голосов
/ 01 ноября 2011

Спасибо за публикацию таблицы стилей.Эта серая «граница», которую вы видите, вытекает из этого правила: 

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 не добавлял поддержку box-shadow до IE9, поэтому вы этого не делаетеувидеть тень в IE8.

...