Предметом здесь является использование отрицательных полей в маркированных списках для отображения изображения в желобе слева от элемента заголовка: я нашел статью Simplebits , которая объясняет, почему это хорошее решение длязаголовки (обычно они используются для перемещения столбцов, которые вообще не имеют таких же последствий): комментарии в статье также заслуживают рассмотрения, так как они относятся к проблеме IE, которую это вызывает, хотя решения не предлагается.
В своем первоначальном виде стиль использует URL-адреса данных (которые IE6 / 7 вообще не поддерживает), поэтому я применяю два стиля одновременно: один для современных браузеров, а другой предназначен только для IE6 / 7., используя lt-ie8 класс :
1.CSS для современных браузеров
/* IE6/7 dont display the data URL. In modern browsers this works fine. */
.linked-list-item {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAACXBIWXMAAAsTAAALEwEAmpwYAAABN0lEQVQYGa3BuyuGYRjA4d/9PC8+RU6RUmRAya5kNFjMNjPegRTeA/8AoWQgOYRkkoT64itJSHIugwwMYsFiYHD7XoTR4LrgfzgYwMESMTg4OBg+CL9ZLD8sX1zOuWWZKiJlDBNnkGLAkrSIxuIFU4X3RqmhQTTluejIeRWlnqQm0fzGcL3n1FvJ3JQX0fKNYCrYDAdicZRcSMihfxRe9e50LrozKWqevD3/pGvFX+gYiiku7GckwuPgyt8Od9tH0zX11D/w1nqGvYlgPPuRPugv0O5EsBVc+DvZvaKpb23z4Wqw5M25k1lKI+TJS/pdbVvLWOmIKGPcpN21znqrzdPmQa75UMGZqFVR+oFKuRWVN1EuKSHJEimnmhzAEKnHpY6IJckifHIAyw/DN4NF+CRYHCzCX7wDrWZoQuKsx98AAAAASUVORK5CYII=) no-repeat 0 4px;
padding-left: 25px;
margin-left: -25px
}
Это то, что отображает код (оно отображает изображение с полями - обратите внимание на верхнее поле размером 26 пикселей для заголовка «Последние твиты» под ним ):
2.Только CSS для IE6 / 7
/* 1. IE6 clips this if you don't add 'float:left' and 'position:relative'
*
* 2. { Needed to display the background
* 3. { image in IE6 [see this thread: http://i.via.dj/EThi]. */
.lt-ie8 .linked-list-item {
background: url(link-icon-black-16x16.jpg) no-repeat 0 2px;
padding-left: 25px;
margin-left: -25px; /* 1. */
float: left; /* 2. */
position: relative /* 3. */
}
Отображает изображение маркера ( после добавления float: left и position: relative), но поле длязаголовок h2 сместился вправо до совпадения с маркированным заголовком :
Первый набор кода (для современных браузеров) работает хорошо, хотя мне интересно, используется литакой большой URL-адрес данных на самом деле стоит того, чтобы избежать лишнего http-запроса, но здесь проблема не в этом.
В исходном виде (без добавления float: left и position: relative) IE-специальная разметка не работает: IE6 обрезает часть элемента, которая находится внутри отрицательного поля, то есть он не отображает маркер изображения, которое он должен отображать.
Это переполнение стека поток фактически предлагает переместить элемент, который обрезается влево, и добавить position: relative.
. Вы можете увидеть HTML и CSS с приведенным выше кодом только для IE, в действии в this jsfiddle .Вы также можете увидеть сайт с песочницей в действии по этой ссылке : попробуйте его в IE6 и 7, и вы увидите следующие проблемы:
1.В IE7 поле для элемента ниже свернуто и перекрывается с маркированным элементом, но это еще хуже, поскольку браузер, похоже, смущен шириной маркированного заголовка:
2.В IE6 это немного лучше, хотя маржа также уменьшилась:
Я неохотно обращаюсь к этому с дополнительной разметкой, поскольку это было бы излишним решениемпроблема IE6 / 7, затрагивающая стилизацию CSS, которая нацелена только на очень мало посетителей (так как здесь я собираюсь доставить немало хлопот, чтобы обслужить бедных людей, которые используют эти браузеры…)
Все ещевсе комбинации, которые я мог придумать с overflow, clear, display и т. д., просто не сработали, и поиск этой проблемы в основном вызывает проблемы со столбцами, которые на самом деле совсем не совпадают.
Любые предложения приветствуются, как всегда.