浮动和 IE6 的问题

Question

我在 IE6 中浮动有问题。 HTML 代码：

<div id="stran">
    <img src="../Slike/prejsnja.png" alt="Prejšnja" onclick="prejsnja();" onmouseover="this.style.cursor='pointer';" id="prejsnja" />
        STRAN <?php dobiStran(); ?>
    <img src="../Slike/naslednja.png" alt="Naslednja" onclick="naslednja();" onmouseover="this.style.cursor='pointer';" id="naslednja" />
</div>

CSS：

#prejsnja {
float: left;
}

#naslednja {
float: right;
}

#stran {
position: relative;
width: 400px;
border: 2px black solid;
margin: 0 auto;
font-family: "Comic Sans MS";   /*Izberemo drugo pisavo, kot pa tista ki je definirana v body.*/
color: #599cd4;
text-align: center; /*Postavimo na center.*/
font-size: 30px;    /*Vecja pisava, ker gre za naslov.*/
}

左图向左浮动，文本居中，右图也向右浮动，但由于某种原因，它有某种边缘顶部，只出现在 IE6 中。以下是其他浏览器中的示例：

在 IE6 中：

Answer 1

试着移动你的 HTML 元素，像这样：

<div id="stran">
    <img src="../Slike/prejsnja.png" alt="Prejšnja" onclick="prejsnja();" onmouseover="this.style.cursor='pointer';" id="prejsnja" />
    <img src="../Slike/naslednja.png" alt="Naslednja" onclick="naslednja();" onmouseover="this.style.cursor='pointer';" id="naslednja" />
        STRAN <?php dobiStran(); ?>
</div>

然后你的样式变成：

#prejsnja {
  float: left;
  width: 100px;
}

#naslednja {
  float: right;
  width: 100px;
}

#stran {
position: relative;
width: auto;
border: 2px black solid;
margin: 0 auto;
font-family: "Comic Sans MS";   /*Izberemo drugo pisavo, kot pa tista ki je definirana v body.*/
color: #599cd4;
text-align: center; /*Postavimo na center.*/
font-size: 30px;    /*Vecja pisava, ker gre za naslov.*/
}

我假设您的箭头图像是 100 像素，但只需将它们更改为它们的实际值即可。