css - 在背景图像中使用负边距显示元素符号的问题(IE6 和 7)

Question

这里的主题是在元素符号列表中使用负边距在标题元素左侧的装订线中显示图像:我找到了一个 Simplebits article这解释了为什么这是一个很好的标题解决方案(它通常用于移动根本不会产生相同结果的列):文章中的评论也值得一看，因为它们指的是 IE 问题原因——尽管没有提供解决方案。

在其原始形式中，样式使用数据 URL(IE6/7 根本不支持)，因此我同时应用两种样式，一种用于现代浏览器，另一种仅针对 IE6/7，使用lt-ie8 class :

<强>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。仅适用于 IE6/7 的 CSS

/*   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 剪辑了部分负边距内的元素，这意味着它不会显示它要显示的图像元素符号。

这个堆栈溢出 thread实际上建议将被剪裁的元素向左浮动并添加 position: relative。

您可以在 this jsfiddle 中看到 HTML 和 CSS，上面的代码仅适用于 IE。 .您还可以在此 link 上看到正在运行的沙盒站点。 : 在 IE6 和 7 中尝试一下，您将看到以下问题。

<强>1。在 IE7 中，下方元素的边距已折叠并与元素符号元素的边距重叠，但情况更糟，因为浏览器似乎对元素符号标题的宽度感到困惑:

<强>2。在 IE6 中它稍微好一些，尽管利润率也有所上升:

我不愿意用额外的标记来解决这个问题，因为这对于解决仅针对极少数访问者的影响 CSS 样式的 IE6/7 问题来说确实有点矫枉过正(因为我将要解决相当多的问题)麻烦在这里照顾那些使用这些浏览器的穷人......)

尽管如此，我能想到的所有与overflow、clear、display 等的组合都没有用，谷歌搜索问题主要是列的问题，它们根本不一样。

一如既往地欢迎任何建议。

Answer 1

在为老浏览器编写 css 时，当您编写 float:whatever 时，立即添加一个 display:inline，它修复了一些边距问题。但是，我不知道这是否有助于解决您的具体问题。

您可以通过使用 1 像素的顶部/底部填充/白色边框来防止边距折叠。

也许您可以使用 block 格式化上下文:

overflow: hidden;
zoom: 1;
position: relative;

h2.sidebar-title 不应该有 clear: both 来禁用对 h2.linked-list-item 的干扰吗？