Как заставить <h3> работать в уже определенном теге <a>? - PullRequest
Новая
       4

Как заставить <h3> работать в уже определенном теге <a>?

0 голосов
/ 19 июля 2011

У меня есть тег, который, кажется, игнорируется браузером, потому что это уже также тег, стиль которого определен следующим образом: 

.content .chapter_text {
    margin-bottom: 0em; 
    padding: 0.5em;
    line-height: 1.4em;
}

.content .chapter_text li{
    list-style-image: url("http://www.comehike.com/img/ui/circle.png");
    margin-left:20px;
}
.content .chapter_text li a{
    color: #7e9940;
    text-decoration: none;
}
.content .chapter_text a:hover{
    color: #3f6b30;
}

Страница, над которой я работаю, находится здесь: http://www.comehike.com - см. Средний раздел в центральном и правом столбцах.

Ссылки заголовков находятся внутри, но не отображаются. Как мне отредактировать стиль, чтобы он отображался?

Спасибо, Alex

Ответы [ 3 ]

8 голосов
/ 19 июля 2011

<h3> недопустимо в <a> или даже в <p> - <h3> является тегом уровня блока, а <a> является встроенным.Таким образом, вы получите противоречивое поведение в разных браузерах.Например, Chrome внутренне переписывает этот HTML-код следующим образом: 

<p>
</p>
<p>
  <a href="http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=53">
  </a>
</p>
<h3>
  <a href="http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=53">
    Milpitas Social Group
  </a>
</h3>
<p>
  Where: 95035 [...]
</p>

Вам потребуется реструктурировать свой HTML-код, чтобы этого не произошло, или использовать встроенный элемент вместо <h3>.

1 голос
/ 19 июля 2011

Похоже, вам придется сделать что-то вроде этого: 

.content .chapter_text li a h3 {
    color: #7e9940;
    text-decoration: none;
}

(Обратите внимание на h3 перед {)

Работает ли это?

0 голосов
/ 19 июля 2011

Уровень блока и встроенные элементы отображаются по-разному.Обычно элементы уровня блока начинаются на новой строке, если встроенный элемент не является.поэтому, если вы поместите элементы уровня блока, такие как div, p, h1..h6, это будет недопустимой разметкой html.

Пожалуйста, проверьте w3 спецификацию .Вы также можете посмотреть в этом вопрос

...