html - IE11兼容性 View 中的定位问题

Question

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

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

在 IE 11 兼容 View 模式下，主 div 内的“节点”看起来像 FIXED，并且在滚动时将保持在原位。当不在兼容性 View 中时，它们将正常运行并始终显示在父 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 在兼容性 View 中表现相同。

Answer 1

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

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

这应该强制 IE8+ 进入它自己的模式，应该在(重新)加载页面时覆盖用户设置的兼容性 View 。