IE 11 兼容性视图中的定位问题

Question

当代码在 IE 11 兼容性视图中呈现时，我在 css 中定位时遇到问题。相同的代码在 Chrome 和 Firefox 中显示正常。请注意，当禁用兼容性视图时，整个内容显示正常。

基本上我有一个矩形，其中包含一系列“节点”，这些“节点”必须从左到右彼此相邻地显示。

在 IE 11 兼容视图模式下，主 div 内的“节点”看起来像固定的，并且在滚动时将保持在原位。当不在兼容性视图中时，它们将正常运行并始终显示在父 div 中。请注意，主 div 本身将始终出现在正确的位置，只有内容会显示固定。

代码如下；

<!-- This is the main div ---><div id='xxxxx'  style='background-color:#fff;width:100%;height:34px;border:black 1px solid;border-bottom:1px #E0E0E0 solid;padding:5px;' >
<div title='Node1' align ='center' style='left:0px;position:relative;top:0px;line-height:40px;display:inline;height:40px;width:100px;'>Some text</div>

<div title='Node2' align ='center' style='left:-10px;position:relative;top:0px;line-height:40px;display:inline;height:40px;width:100px;'>Some text</div>

<div title='Node3' align ='center' style='left:-20px;position:relative;top:0px;line-height:40px;display:inline;height:40px;width:100px;'>Some text</div>

</div> <!-- end the main div -->

如您所见：主 div 没有定义“position”属性 “节点”div 内部定义了相对位置。 如果您注意到，左侧定位每次都会下降 10px，因为“节点”彼此重叠（这是想要的）

我几乎无法控制这段代码之前和之后的内容，因为这是现有软件的定制，我只能更改这部分。

我很好奇我需要更改什么才能使内部 div 在兼容性视图中表现相同。

Answer 1

如果您可以控制头部部分，请尝试将其放入其中，作为第一个标签：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

这应该强制 IE8+ 采用自己的模式，当页面（重新）加载时应该覆盖用户设置的兼容性视图。

Answer 2

兼容性视图不是“ie11 的兼容性视图”，它是 ie 11 模拟旧版本的 ie。如果你让它看起来适合 ie7，那么它就可以工作。

这就是它的用途——如果您的网站在 ie11 上看起来很糟糕，那么您可以切换到兼容性视图，这意味着“查看该网站是否与旧版本的 ie 而不是 ie11 兼容”——因此通常不推荐这样做对此进行计划。如果正确的格式无法正常工作，它可以作为备份计划。

old-ie 的代码与 inline-block 不同。

尝试在 css 末尾使用它...

display:inline-block; *display:inline; *zoom:1;

这将针对几乎任何版本的网络浏览器：

style='left:-10px;position:relative;top:0px;line-height:40px;height:40px;width:100px;display:inline-block; *display:inline; *zoom:1;'>Some text</div>

您需要像每个 div 那样修复内联块部分，或者代码中具有内联块的任何位置，以使其正常工作。

编辑后的完整代码：

<!-- This is the main div ---> <div id='xxxxx'  style='background-color:#fff;width:100%;height:34px;border:black 1px solid;border-bottom:1px #E0E0E0 solid;padding:5px;' >

<div title='Node1' align ='center' style='left:0px;position:relative;top:0px;line-height:40px;height:40px;width:100px;display:inline-block;*display:inline;*zoom:1;'>Some text</div>

<div title='Node2' align ='center' style='left:-10px;position:relative;top:0px;line-height:40px;height:40px;width:100px;display:inline-block;*display:inline;*zoom:1;'>Some text</div>

<div title='Node3' align ='center' style='left:-20px;position:relative;top:0px;line-height:40px;height:40px;width:100px;display:inline-block;*display:inline;*zoom:1;'>Some text</div>

</div> <!-- end the main div -->

如果 IE 对每个 IE 版本都使用相同的 inline-block 命令，则不需要这样做。我在发布之前在兼容模式下为您测试了这一点，它确实有效。

将来使用类可能会对您有利，如下所示：

.inline_block { display:inline-block;*display:inline;*zoom:1; }

现在你可以这样做：

<div class="inline_block" style="STYLES HERE"> Text </div>

您的内联块适用于所有情况。