gpt4 book ai didi

html - IE8 : float inside li

转载 作者:行者123 更新时间:2023-11-28 02:10:52 25 4
gpt4 key购买 nike

IE 再次让我发疯。在实际应用程序中,我希望左侧有图像,右侧有一些链接,中间是标准文本。下面的示例在另一个 div 中只有 3 个 div,但这足以说明问题。

该示例有 2 次相同的构造。一次裸露,一次封装在列表中。 Firefox 显示

|Left text|Center text<-->|Right text|

,列表缩进,但大体相同。

IE8 对裸结构显示相同。但是对于封装的代码,事情出了问题:

|Left text|<-->|Right text|
|Center text<--> |

上部间隙为黄色,即包含的 div。

由于对我来说 CSS 行为并不总是直观的,我想知道我的以下代码是否与任何标准冲突。如果它足够符合,是否有任何方法可以帮助 IE8 按预期呈现它?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float Test for IE</title>
<style>
.meta-left {
float: left;
background-color: red;
}
.meta-right {
float: right;
background-color: blue;
}
.meta {
background-color: green;
}
.meta-container {
background-color: yellow;
}
ol {
clear: both;
list-style: none;
}
p {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="meta-container">
<div class="meta-left">
<p>Left text</p>
</div>
<div class="meta-right">
<p>Right text</p>
</div>
<div class="meta">
<p>Center text</p>
</div>
</div>
<ol><li>
<div class="meta-container">
<div class="meta-left">
<p>Left text</p>
</div>
<div class="meta-right">
<p>Right text</p>
</div>
<div class="meta">
<p>Center text</p>
</div>
</div>
</li></ol>
</body>
</html>

最佳答案

尝试添加 http-equiv="X-UA-Compatible"content="IE=edge" 元标记?强制 IE 使用其最先进的渲染引擎进行渲染

关于html - IE8 : float inside li,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8459971/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com