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

编辑：我发现问题实际上是IE将HTML元素类文本从以下内容更改为：

”

我使用JQuery可视化地更新网站，在我的主div（updateablediv）中，我将每个可更新的HTML元素（例如p、I、b等）更改为文本区域。用户进行文本更改，然后我将文本区域更改回p、b等。这都是使用JQuery完成的

我的问题：当我从div获取HTML时（id为updateablediv），我的HTML略有不同，这导致HTML的显示略有不同。例如：如果我有一个图像位于白色框的正上方（而不是中间的垂直间隙），更新html后，在图像和白框之间引入了一个垂直间隙

因此，html之前的版本是（这是IE的一个示例）：



使用调用$（“#updateablediv”）.HTML（）获取HTML后，HTML如下所示：

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



因此，它会导致一个垂直间隙

因此，我的主要问题是如何保持HTML的所有格式，以便在我更新HTML并通过JQuery的$（“#updateablediv”）.HTML（）从元素中获取HTML后不会出现类似问题？使
img
显示：block
源代码中的空白不重要。您不会丢失（或添加）过渡期间的一些CSS类信息，是吗

默认情况下，img元素是内联的，因此通常它们与文本基线对齐，留下一个间隙，即基线下方的额外空间，用于悬挂字母（如小写字母）。块元素应与包含块的底部对齐

尝试设置一些CSS：

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

当你在IE的某些版本中获得innerHTML时，它不会返回你的原始HTML。它会给你一个生成的HTML版本，该版本可能与原始版本有很大不同（尽管在语义上与原始版本相同）

我看过IE的一些版本：


删除属性周围的引号
更改属性的顺序
更改属性名称的大小写

因此，简而言之，当你在IE中获得某个东西的innerHTML时，你所能指望的就是它会给你语义上相同的HTML，但它可能与原来页面中的HTML不一样。它似乎没有保存原始HTML，而是从对象属性生成。因为有很多合法的方法不能o表示给定的一组属性，即不一定会以您最初指定的方式生成它

我不相信你能做什么，除非你想根据你自己的风格规则重新格式化IE提供给你的生成HTML（在你想要的地方添加引号，按特定顺序放置属性，更改为特定的大小写，等等）

如果您在IE7中运行，您将看到它更改了上面最初指定的所有三项

我在IE7中指定此HTML：

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



当我请求innerHTML时，我得到了以下信息（不同的顺序、大写和引号）：



如果你注意到的垂直间距是因为HTML的改变，我会感到惊讶。IE以在图像周围留出额外空间而臭名昭著。首先，它们默认为内联项，因此它将它们视为一行的一部分，并给出它们在当前行高上的行。这可以以各种方式在图像周围增加额外空间。我在IE中使用的解决方法是使图像
显示：block
（如果合适的话）或者在图像所在的容器上设置
font size:0
，这样IE不会给行增加任何高度。您还应该确保为图像指定了边框，因为旧版本的IE也喜欢给图像指定默认边框

这种图像周围的额外间隔可以由一个先前不存在的空间中存在的空间来触发。其他浏览器认为空间仅仅是一个分隔符，但是在较旧版本的IE中，它触发了一些额外的行间距。
 @戴维-你能提供一个演示或一些文档来支持吗？@ david He是不正确的。l除nbsp和内部内容以外的空白被压缩为一个空格，然后换行符被放在浏览器想放的任何地方。@david我相信我们三个人都同意这一点。@david-正如EJP所指出的，唯一符合显示条件的空白是一个可能的内联空白字符。我的评论的前提不是inc正确；如果你不把空白压缩成一个显示的空白，那么你所做的更准确的评论应该是澄清。@Jake M-好的，我很困惑：是IE报告HTML不同的问题吗（缺少引号等），jfriend00接受的答案中有一个很好的解释，或者在浏览器中查看的实际渲染结果不同？（我不理解接受的答案与渲染问题的关系。）OP链接到此问题（）但是，我想知道这是否在jQuery、MooTools和/或其他框架/库中得到了解决？我在回答中添加了一个JSFIDLE，在IE7中运行时显示了这个问题。
img { display:block; }
// or possibly
img { vertical-align:bottom; }

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

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