Question

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

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

在IE 11兼容性视图模式下，主div内的“节点”看起来像FIXED并在滚动时保持原位。如果不在兼容性视图中，它们将正常运行并始终显示在父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”属性 “nodes”div的内部定义了相对位置。如果你注意到，左侧位置每次下降10px，因为“节点”彼此重叠（这是想要的）

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

我很好奇，因为内部div在兼容性视图中的行为相同，我需要更改。

Answer 1

兼容性视图不是'ie11的兼容性视图'，即11仿效旧版本的ie。如果你让ie7看起来很好，那么它就会起作用。

以下是它的用途 - 如果您的网站在ie11上看起来很糟糕，那么您切换到兼容性视图，这意味着'看看这个网站是否与旧版本的ie而不是ie11'兼容 - 所以它不是一般建议为此计划。如果正确的格式不正常，它将作为备份计划。

old-ie的代码对于内联块是不同的。

尝试在你的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>

您的内联块将适用于所有内容。

Answer 2

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

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

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

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

2 个答案: