IE6中背景颜色隐藏浮动内容的问题

发布于 2024-11-09 08:47:24 字数 1876 浏览 0 评论 0原文

因此，人们在使用 CSS 为 IE6 和所有其他浏览器编程和实现 HTML 模板时很少遇到麻烦。但这一次让我很头疼。

问题是 IE6 的兼容性（我正在使用 YAML 框架）。

所以，让我们继续吧。这是罪魁祸首代码：

HTML

<div class="info">
    <div>
       <div class="float_left">
           <img alt="aktuelles bild" src="images/dummy_aktuelles.gif" />
           <span>26.10 - 27.10.2010</span>
           <span>xxx xxx</span>
           <span>(Flughafen)</span>
       </div>
       <div class="lastObject">
           <span>09.09.2010 Offenes-Presseportal</span>
           <span class="lastObject">Global Connect 2010 - Globalisierung für den Mittelsand</span>
           <p>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam leo.
           </p>
       </div>
    </div>
</div>

CSS

#main .aktuelles .info {
    padding:15px;
    overflow:hidden;
    border-bottom: 1px #949494 dotted;
}
#main .aktuelles .info .float_left {
    width:35%;
}
#main .aktuelles .info .float_left span {
    padding-bottom: 5px;
    display: block;
    color: #333;
    font-size: 13px;
}
#main .aktuelles .info .float_left img {
    padding-bottom: 5px;
}
#main .aktuelles .info div .lastObject span {
    color:#2d2d2d;
    font-size: 12px;
    display: block;
    padding-bottom: 5px;
}
#main .aktuelles .info div.lastObject span.lastObject {
    color: #2d2d2d;
    font-size: 14px;
    display:block;
    padding: 0 0 5px 0 !important;
}
#main .aktuelles .info div lastObject p {
    font-size: 12px;
}

现在第一个向左浮动的 div 根本不出现。它位于lastObject 的背景之下。 info div 的父容器没有任何位置。

有什么建议吗？

这是错误的图像：图像不存在，也没有跨度，其他内容都可以

看来问题与此代码无关。但我没有任何其他想法。我还尝试更改 z 索引，但它显然不起作用，因为它不是背景图像，而是背景颜色。

原文

So people I seldom have trouble programming and implementing HTML templates with CSS for IE6 and all the other browsers. But this time this is breaking my head.

The issue is compatibility for IE6 (I'm using the YAML framework.)

So, lets get on with it. This is the culprit code:

HTML

<div class="info">
    <div>
       <div class="float_left">
           <img alt="aktuelles bild" src="images/dummy_aktuelles.gif" />
           <span>26.10 - 27.10.2010</span>
           <span>xxx xxx</span>
           <span>(Flughafen)</span>
       </div>
       <div class="lastObject">
           <span>09.09.2010 Offenes-Presseportal</span>
           <span class="lastObject">Global Connect 2010 - Globalisierung für den Mittelsand</span>
           <p>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam leo.
           </p>
       </div>
    </div>
</div>

CSS

#main .aktuelles .info {
    padding:15px;
    overflow:hidden;
    border-bottom: 1px #949494 dotted;
}
#main .aktuelles .info .float_left {
    width:35%;
}
#main .aktuelles .info .float_left span {
    padding-bottom: 5px;
    display: block;
    color: #333;
    font-size: 13px;
}
#main .aktuelles .info .float_left img {
    padding-bottom: 5px;
}
#main .aktuelles .info div .lastObject span {
    color:#2d2d2d;
    font-size: 12px;
    display: block;
    padding-bottom: 5px;
}
#main .aktuelles .info div.lastObject span.lastObject {
    color: #2d2d2d;
    font-size: 14px;
    display:block;
    padding: 0 0 5px 0 !important;
}
#main .aktuelles .info div lastObject p {
    font-size: 12px;
}

Now the first div that is floating to the left doesn't appear at all. It is underlying the background of lastObject. The parent container of the info div has no position whatsoever.

Any suggestions?

This is an image of what is wrong:
The image is not there nor are the spans, the other content is ok

It seems the problem is not related to this code. but I dont have any other ideas. I also tried altering the z index but it evidently wont work since its not a background image it is the background color.

分享到QQ

分享到微博