display:inline в IE, FF и Opera

ardjuna · July 27, 2008

Когда используется inline в самом верху страницы, то border-top элемента к которому он применен не отображается в IE.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>vkladka_ne_rabotaet_v_IE_border-top.html
</title>
<style type="text/css">
.notetitle {
  border: 1px solid black; /* Параметры рамки */
  border-bottom: none; /* Убираем границу снизу */
  padding: 3px; /* Поля вокруг текста */
  display: inline; /* Устанавливаем как встроенный элемент */
  background: #ffeebf; /* Цвет фона */
  font-weight: bold; /* Жирное начертание */
  font-size: 90%; /* Размер шрифта */
  margin: 0; /* Убираем отступы */
  white-space: nowrap; /* Запрещены переносы текста */
}

.note {
  border: solid 1px #634f36; /* Параметры рамки */
  background: #f3f0e9; /* Цвет фона */
  padding: 7px; /* Поля вокруг текста */
  margin: 0 0 1em 0; /* Значение отступов */
}
</style>
</head>
<body>
<p class="notetitle">Примечание</p>
<p class="note">Исходя из различных критериев, основными из которых являются показатели целесообразности и эффективности приложенных усилий, можно однозначно сказать следующее. А именно, что достижение желаемых результатов требует гибкого подхода, основанного на опыте и глубоком понимании смысла вышеизложенного.</p>

</body>
</html>

Если установить неразрывный пробел выше блока с встроенным элементом то, border-top заработает в IE , одновременно с этим перестанет работать значение none установленное для border-bottom в Opera и FF

<body>
<p> </p>
<p class="notetitle">Примечание</p>
<p class="note">Исходя из различных критериев, основными из которых являются показатели целесообразности и эффективности приложенных усилий, можно однозначно сказать следующее. А именно, что достижение желаемых результатов требует гибкого подхода, основанного на опыте и глубоком понимании смысла вышеизложенного.</p>

</body>

Есть ли другое кроссбраузерное решение с использованием inline? Или для разных браузеров свой код писать? Или же вообще не стоит использовать inline , так как с ним косяки существуют( напр. ширину ему не задать)?

homm · July 27, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>vkladka_ne_rabotaet_v_IE_border-top.html
</title>
<style type="text/css">
.notetitle {
  border: 1px solid black; /* Параметры рамки */
  border-bottom: none; /* Убираем границу снизу */
  padding: 3px; /* Поля вокруг текста */
  float: left; /* Устанавливаем как встроенный элемент */
  background: #ffeebf; /* Цвет фона */
  font-weight: bold; /* Жирное начертание */
  font-size: 90%; /* Размер шрифта */
  margin: 0; /* Убираем отступы */
  white-space: nowrap; /* Запрещены переносы текста */
}

.note {
  clear: both;
  border: solid 1px #634f36; /* Параметры рамки */
  background: #f3f0e9; /* Цвет фона */
  padding: 7px; /* Поля вокруг текста */
  margin: 0 0 1em 0; /* Значение отступов */
}
</style>
</head>
<body>
<p class="notetitle">Примечание</p>
<p class="note">Исходя из различных критериев, основными из которых являются показатели целесообразности и эффективности приложенных усилий, можно однозначно сказать следующее. А именно, что достижение желаемых результатов требует гибкого подхода, основанного на опыте и глубоком понимании смысла вышеизложенного.</p>

</body>
</html>

ardjuna · July 29, 2008

Но border-bottom у примечание есть, а не должно быть! В примере с добавлением та же проблема в Opera и FF!

Вот, что требуется убрать черту под словом "Примечание"!

homm · July 29, 2008

Но border-bottom у примечание есть, а не должно быть!

margin-bottom: -1px;

ardjuna · July 29, 2008

Голь на выдумк сильна.Спасибо заработало. Учту возможности отрицат. margin. Кстати это будет не профессионально или такой margin использовать можно с точки зрения стандартов? Посовеует кто-либо как читать эти стандарты новичку(может кто ссылку на хорошую статью об этом даст)?

Sign In

display:inline в IE, FF и Opera

Question

ardjuna

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

homm

Link to comment

Share on other sites

ardjuna

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

ardjuna

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information