изменить ширину на элементе h3 - PullRequest
Новая
       29

изменить ширину на элементе h3

3 голосов
/ 24 ноября 2011

Почему тег отображается неправильно в Chrome, но не в Firefox?В Firefox слово «Балтимор» не отображается на следующей строке. 

<h3>Hill’s Garage<br>
<span> Nissan and Infiniti Mechanic in Baltimore</span></h3>

Это страница на вопрос.http://hillsgarage.net/wpdir

Заранее благодарим за помощь.

enter image description here

Ответы [ 3 ]

4 голосов
/ 24 ноября 2011

Они тоже для меня выглядят одинаково.Это, вероятно, конкретная проблема версии.

Однако, я бы предположил, что может иметь отношение к вложению <br> внутри <h3>, а также к вложению <span> внутри.

Вы, вероятно, должны использовать что-то вроде 

<h3>Hill’s Garage</h3>
<span> Nissan and Infiniti Mechanic in Baltimore</span>

или 

<h3>Hill’s Garage</h3>
<h4>Nissan and Infiniti Mechanic in Baltimore</h4>

По крайней мере, один из этих методов, скорее всего, избавится от этой проблемы, даже если яне уверен, что это вызывает.

Кроме того, вы всегда должны закрывать свои теги <br> следующим образом: <br/>

Вы также можете назначить класс или идентификатор для диапазона, если вы хотите убедиться, что только этоspan зависит от ваших правил стиля.

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

У вас есть <div> на странице с именем featured (содержит галерею изображений), которая всплывает справа и имеет верхний край 120 пикселей. То, что происходит, это заставляет все слева от него оборачиваться (измените цвет фона на красный, и вы увидите, как это мешает). Вам нужно переместить <h3> за пределы post div, чтобы оно было выше как post, так и featured div. Если у вас нет такого уровня контроля, вы можете получить результат, уменьшив размер шрифта <span> внутри <h3> до 13px

Что у вас сейчас есть: 

<div id="featured">...images...</div>
<div class="post">
  <div class="entry">
    <div class="body_resize">
      <div class="body1">
         <h3 style="position: relative;">Hill’s Garage<span><br>
         Nissan and Infiniti Mechanic in Baltimore</span></h3>
      </div>
    </div>
  </div>
</div>

#featured {
  float: right;
  padding-bottom: 20px;
  margin-right: -10px;
  padding-top: 120px;
}

.body1 h3 span {
  font: normal 14px Arial, Helvetica, sans-serif;
  color: #898989;
}
0 голосов
/ 24 ноября 2011

Мне кажется, что Chrome правильный, а также FF и IE. 

.body1 h3 span {
font: normal 14px Arial, Helvetica, sans-serif;
color: #898989;
}

Вы должны перенести H3 в конец гаража.

Возможно, предоставьте изображения вашей проблемы.

(Кроме того, я отмечаю раздражение с помощью правой полосы прокрутки при смене вкладок Chrome).

...