Question

编辑： 我发现问题实际上是IE更改了HTML元素类文本：

"<img class="blah".." to "<img class=blah..".

这只发生在IE浏览器中。请注意，它不会删除src引号或id引号或其他引号。这太令人沮丧了！

我正在使用JQuery直观地更新网站，在我的主div（updatableDiv）中，我将每个可更新的HTML元素（例如 p，i，b等）更改为textarea。用户进行文本更改然后我将textareas更改回p，b等。这都是使用JQuery完成的。

我的问题：当我从div获取HTML（使用id updatableDiv）时，我的HTML略有不同，导致HTML的显示略有不同。例如：如果我有一个直接位于白框上方的图像（不是中间的垂直间隙），在更新html之后，图像和图像之间会出现垂直间隙。白盒子。

所以之前的html是（这是IE的一个例子）：

<img class="pageHeading" src="linksHeading.png" width="90%" alt=""/><div class="pageContent">

使用调用$（“＃updatableDiv”）。html（）获取HTML后，html看起来像这样：

<IMG class=pageHeading alt="" src="linksHeading.png" width="90%">
<DIV class=pageContent>

因此导致垂直差距。

所以我的主要问题是如何保留HTML的所有格式，以便在我更新HTML＆amp;之后不会发生这样的问题。通过JQuery的$（“＃updatableDiv”）从元素中获取HTML。html（）？

Answer 1

制作img display: block。

Answer 2

源中的空白区域无关紧要。你在过渡期间没有丢失（或添加）一些CSS类信息吗？

默认情况下，img元素是内联的，所以通常它们排列到文本基线，留下一个间隙，这个空格是悬挂字母（如小写字母g）的基线以下的额外空间。块元素应与包含块的底部对齐。

尝试设置一些CSS：

img { display:block; }
// or possibly
img { vertical-align:bottom; }

Answer 3

当你在某些版本的IE中获得innerHTML时，它不会回复你的原始HTML。它将为您提供生成的HTML版本，该版本可能与原始版本完全不同（虽然在语义上与它相同）。

我见过IE的某些版本：

删除属性
更改属性的顺序
更改属性名称的大小写

因此，简而言之，当你在IE中获得某些东西的内部HTML时，所有你可以依赖的是它会在语义上给你相同的HTML，但它可能与最初的页面中的HTML不同。它似乎不保存原始HTML，而是从对象属性生成它。由于有许多合法的方法来表达给定的属性集，因此IE不一定会以最初指定的方式生成它。

我不相信你可以做任何事情，除非你想根据自己的风格规则重新格式化IE给你的生成的HTML（在你想要的地方添加引号，按特定顺序放置属性，更改特定情况等...）。

如果您在IE7中运行this jsFiddle，您会看到它会更改上面指定的所有三个项目。

我在IE7中指定了这个HTML：

<div id="test" data-item="test" style="background-color: red; height: 40px; width: 100px;">

当我请求innerHTML时，我得到了回复（不同的顺序，上限和引用）：

<DIV style="BACKGROUND-COLOR: red; WIDTH: 100px; HEIGHT: 40px" id=test data-item="test"></DIV>

如果你注意到的垂直间隙是因为改变了HTML，我真的会感到惊讶。 IE因在图像周围留出额外空间而臭名昭着。例如，默认情况下它们是一个内联项，因此它将它们视为一条线的一部分，并给出它们在主线高度上的线。这可以以各种方式在图像周围添加额外的空间。我在IE中使用的解决方法是使图像display: block（如果合适）或在图像所在的容器上设置font-size: 0，因此IE不会给出任何行额外的高度。您还应该确保为图像指定了边框，因为旧版本的IE也喜欢为图像提供默认边框。

图像周围的这种额外间距可以通过以前不存在的线中存在空间来触发。其他浏览器认为该空间仅作为分隔符，但在较旧版本的IE中，它会触发一些额外的行间距。

浏览器重新格式化我的HTML，导致不同的外观

3 个答案: