2010-09-08 6 views
4

У меня есть CSS выглядеть, как показано нижеперекрестный браузер href внутри href?

ul.sometclass li a { 

display:inline-block; 
} 

мой HTML выглядеть

<ul class="someclass"> 
<li> 
    <a href="outertest.html">outer test 

     <div style="display:inline; float:left;overflow: hidden;"> 
        <a href="innertest.html"><div style="display:inline; float:left;">inner test</a> 
        <a href="innertest.html"><div style="display:inline; float:left;">inner test</a> 
     </div> 
    </a> 
</li> 
</ul> 

1.for поперечной поддержки браузера, это нормально использовать HREF внутри HREF?
2. is my ul.someclass li a влияет на внутренний a_href? мне кажется, это влияет и на firefox, хотя я ставлю его как встроенный, он отображает как блок. на то есть нормально

ответ

6

для поддержки кросс-браузера, нормально ли использовать href внутри href?

Нет, определенно нет. Вложенные <a> элементы являются недействительными и попрошайничеством.

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

+3

незначительного семантическое предложение: Я не думаю, что это «умоляя» на неприятность, как таковые: это больше * выходить и активно требуя, ищут и преследуют проблемы ... * = б –

+0

@David ахахахаха! Хорошая точка зрения. –

3

Вы не должны быть гнездовые элементы уровня блока внутри встроенных элементов (т.е. ДИВ вложенные в А HREF элемента)

-1

Если вы хотите, чтобы достичь того же эффекта, вы могли бы сделать что-то вроде:

<div class="outer"> 
    <a ... /a> 
</div> 
<a class="floatLink" ... /a> 

Затем, с некоторым умным позиционированием и z-индексированием, вы можете заставить поплавковую ссылку появляться внутри внешнего тега, сохраняя при этом поддержку кросс-браузера.

0

Для того чтобы иметь вложенный пожалуйста, следующие изменения ....

Вы должны обернуть вложенный внутри object тега.

<ul class="someclass"> 
<li> 
    <a href="outertest.html">outer test 

     <div style="display:inline; float:left;overflow: hidden;"> 
        <object><a href="innertest.html"><div style="display:inline; float:left;">inner test</a></object> 
        <object><a href="innertest.html"><div style="display:inline; float:left;">inner test</a></object> 
     </div> 
    </a> 
</li> 
</ul> 
Смежные вопросы