浮动权不工作在IE

我想漂浮一个图像的权利。这应该很简单。在FF和Chrome中看起来很好，但在IE中，文本并没有环绕图像。我认为这与我给段落标签的样式有关。无论如何，任何有识之士将不胜感激！浮动权不工作在IE

风格：

.story { 
    margin: 0 0 0 360px; 
    padding-top: 30px; 
    padding-left: 30px; 
    max-width: 900px; 
    width: 75%; 
} 
.story p { 
    line-height: 150%; 
    font-size: 20px; 

} 
.half-embed { 
    float: right; 
    position:relative; 
    margin-right:-100px; 
    margin-left:20px; 
    display: inline !important; 
    clear:both; 
} 
.imageborder { 
    border: 1px solid lightgray; 
    padding: 10px; 
}

HTML：

<div class="story"> 
<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p> 

<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p> 


<p><img src="images/myimage.jpg" class="half-embed imageborder" /></p> 

<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p> 

<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p> 

</div>

来源

2013-11-20 LauraNMS

什么版本的IE？ – j08691

我正在使用IE10。 – LauraNMS

你可以把代码放入JSFiddle，Plunkr或类似的东西吗？ – anddoutoi

你设置显示：内联......你不能浮动内联元素。

此外，请确保您正在设置文档类型。否则，你会在IE中处于怪癖模式。

HTML的第一行应该是：

<!doctype html>

从段落中删除图像。它有自己的块级作用域，并且应该强制其他元素挂在它下面。不知道为什么它不会在浏览器中始终如此，但这就是它的工作原理。

来源

2013-11-20 22:23:42 philwills

我删除了内联显示并更改了文档类型。仍然没有骰子，但谢谢。 – LauraNMS

它是否仍然显示为IE7标准的DOCTYPE？哦！！！耽误！！！我刚刚注意到我以前错过的东西。你的图像被包裹在一个p标签中。取下它。 – philwills

你是浮动的图像，即在display: inline-block元素（默认）== <p>

所以<p>占用veiwport的整个宽度，即使你的图像是浮动的。所以，你的文字不能左右你的形象包装（与这里提供的HTML），因为你的文字是在其他<p>的：

<p>Now ....</p> 
<p><img src="images/myimage.jpg" class="half-embed imageborder" /></p> 
<p>...</p>

要使图像周围的文本换行，你应该这样做：

<p> 
    <img src="images/myimage.jpg" class="half-embed imageborder" alt=""> 
    Now we are engage......//oper that we 
</p> 

.half-embed { 
    float: right; 
    margin: 0 0 20px 20px; 
    display: block; 
}

来源

2013-11-20 23:25:11 Mark

这可以在我的测试页面上工作，但不适用于我的实际网站。所以我还在摆弄。谢谢。 – LauraNMS

虽然，如果图像在语义上与段落相关，它应该包含在其中，它不会改变浮动的工作方式。将任何块/块状级别元素向右移动将会将其从页面的直接流中移除，并将其强制移至其容器的右侧边缘。除非下一个块级元素有明确的权限，否则它将浮动到它的左边。 – philwills

Mark的答案适用于我的测试页面，但不适用于我的实际页面，因此缺少一些内容。但是，总体而言，IE7刚刚坏了。我的浮标在任何地方都可以工作，但在那里甚至更高版本的IE。所以我要简化IE7的页面，并警告观众这个事实。

来源

2013-11-21 14:36:08 LauraNMS

浮动权不工作在IE

回答

相关问题