Почему свойство перехода CSS3 действует смешно?

Здесь странные вещи. См. Эту страницу tinkerbin, если вы можете: http://tinkerbin.com/UZy6H6q4 Почему свойство перехода CSS3 действует смешно?

Вот html и css на случай, если вы не видите tinkerbin.

<head> 
<style> 

ul{ 
    overflow: hidden; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    background-color: pink; 
    } 

    ul a{ 
    text-decoration: none; 
    color: white; 
    } 

    li{ 
      float: left; 
      height: 30px; 
      line-height: 30px; 
      width: 90px; 
      margin-right: 5px; 
      background-color:red; 
      text-align:center; 
      -webkit-transition: all .6s linear; 
      } 

     #case2 li{ 
      background: none; 
     } 

      #case2 li:hover, li:hover{ 
       background-color: lightblue; 
       } 
</style> 
</head> 

<body> 

    <!-- CASE #1 --> 

    <ul id="case1"> 
    <a href=""><li>Home</li></a> 
    <a href=""><li>Blog</li></a> 
    <a href=""><li>About</li></a> 
    <a href=""><li>Contact</li></a> 
    </ul> 

    <!-- CASE #2 --> 

    <ul id="case2"> 
    <a href=""><li>Home</li></a> 
    <a href=""><li>Blog</li></a> 
    <a href=""><li>About</li></a> 
    <a href=""><li>Contact</li></a> 
    </ul> 
</body>

Итак, проблема:

-The переход не работает по делу № 1.
-изменение «фона-цвета» из элемента li (как это было на CASE № 2) заставляет его работать, но странным образом - когда вы возвращаете курсор из-за элемента li, перед тем как цвет фона исчезает назад к прозрачному, он сначала становится черным.

Я тестировал обычное использование тега «a», вложенного в li, а не наоборот - отлично работает, как я, по какой-то причине ожидал. Но поскольку, согласно спецификациям, у меня может быть «li», завернутый в тег «a», тогда почему он не работает. Я что-то упускаю?

О, и я использую Chrome - возможно, релевантный.

источник

2012-02-23 banzomaikaka

Может ли ul (и ol, если на то пошло) не иметь ничего, кроме li, как дочерние элементы - сделать тег, обертывающий li недействительным? Может ли это испортить рендеринг? – banzomaikaka

положить Li внутри а является недействительным. Если вы попробуете проверить свой html, он не будет проверен, так как он не будет соответствовать правильной разметке. Якорные теги() являются отдельными тегами, тогда как li - это теги списка, и они являются непосредственными дочерними элементами ul или ol. Надеюсь это поможет. :)

Обратитесь к w3schools.com за дополнительной информацией.

источник

2012-02-23 06:03:16 Abhidev

www.whatwg.org/specs/web-apps/current-work/#the-a-element -> Элементы 'li' не переносят' li', поскольку они не являются потоковым содержимым. – banzomaikaka

И да, спасибо за ответ. – banzomaikaka

Поместите a тег внутри li

проверки этого: http://tinkerbin.com/5kMLVVKk

источник

2012-02-23 04:38:31 sandeep

Да, я знаю. Я также проверил это. Моя проблема в том, чтобы понять, почему, поскольку я «закодировал» это, он не работает. Что случилось с 'li' внутри' a'? Разве это невозможно по спецификации? Нужно ли 'li' немедленно предшествовать тегу' ul' или 'ol'? Или ошибка полностью не связана с html? Это просто неопределенная ошибка? Что меня не хватает? – banzomaikaka

Неправильно давать LI внутри метки привязки, потому что LI - это сразу ребенок UL. Например, если вы видели HTML в firefox с элементом проверки, это выглядит так: «

Home

« И вы тоже видели IE. – sandeep

Почему свойство перехода CSS3 действует смешно?

ответ

Смежные вопросы