Javascript / CSS 不适用于 IE 10 但适用于 IE 8答案

【问题标题】：Javascript / CSS not working for IE 10 but working for IE 8Javascript / CSS 不适用于 IE 10 但适用于 IE 8
【发布时间】：2013-10-26 00:51:44
【问题描述】：

在我的 css 中有这个

#inner div {
    display: inline;
    height: 200px;
    width: 200px;
    margin: 10px;
    background-color: black;
}

在我的 html 中，我有这个

<div id="inner">
    <h2> <span class="action">Click</span> on each button to read more about them </h2>
     <br />
     <span id="here"></span>    
</div>

在我的 Javascript 中我有这个

var divComposition = "<div id='div" + i + "'><p></p></div>";    
$('#here').after(divComposition);

所以我把它放在跨度之后，但它仍然在里面

#inner

原来是这样的

#inner div

。问题是在 IE 8 中，它可以工作。 div 与背景颜色为黑色内联。但是，在 IE 10 中，div 不是内联的，并且背景颜色不是黑色的。怎么来的？我在想如果我将 CSS 移到 Javascript 下方，那么它会起作用，但这也不起作用。关于如何解决这个问题的任何想法？ IE 10 开发者工具没有显示错误。

【问题讨论】：

哪些 div 不应该重叠出现？您正在创建的 div 出现在
和
之后，因此它应该出现在下一行，无论是内联还是块状。
@Gaurav 很抱歉，
不应该在那里。我刚刚编辑了我的帖子并删除了
.. 另外，即使 div 应该出现在另一个之上，我仍然不知道为什么黑色背景不存在。
好吧，如果我在里面放一些文字，而不仅仅是
，我会看到黑色背景。
否则 div 的大小为零。
@Gaurav 我还有一些javascript代码，它们基本上从数组中获取单词并将其附加到'p'中。我像这样附加它 $('#div0 p').append(headings[0]).addClass('div0'); .. #div0 是其中一个 div 的 id，headings 是一个数组，headings[0] 是一个单词。当我在 IE 10 中打开它时，它只是一个白色页面（因为我将所有文本颜色设为白色。当我突出显示页面时，我可以看到文字。这意味着文字在那里，它们只是白色和当它应该是黑色背景时是白色背景。

标签： javascript css internet-explorer cross-browser

【解决方案1】：

元素样式

display:inline;

将忽略高度和宽度，或者应该，无论如何。你试过用 inline-block 代替 inline 吗？

【讨论】：

如果我将其设为 inline-block 则 div 会出现在另一个之上，所以我将它留在 inline 中，因为我想彼此并排.. 我仍然不知道为什么 IE 10 会忽略背景颜色和显示也是如此。在 IE 8 中，即使我的显示是内联的，它也不会忽略宽度和高度。
er，id 为 inner 的外部 div 的定位/样式是什么？
@circleofconfusion 等等，“呃，ID 为内部的外部 div”是什么意思？您是指#inner 中的 div 的定位和样式？
@user2719875，不，我的意思是#inner 本身的实际样式。它的位置和显示可能会影响它的子元素，尤其是它本身是 inline 或 inline-block 时。
@circleofconfusion 好的，所以 #inner { text-align: center;} 和 #inner div p {padding-top: 65px;白颜色;字体系列：“Trebuchet MS”，Arial，Helvetica，无衬线； letter-spacing: 6px;} 和 #inner h2 {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;颜色：黑色；}

【解决方案2】：

换行符将使您的 div 元素垂直对齐...

改变这一行

var divComposition = "<div id='div" + i + "'><p></p></div><br />";

到

var divComposition = "<div id='div" + i + "'><p></p></div>";

您的代码对我来说适用于所有版本的 IE，并且我让 JavaScript 在 HTML 正文中执行。如果仍然无法正确显示，您可以将所有代码放入一个函数中，然后从主体中调用它。

【讨论】：

对，我删除了换行符。黑色背景仍然不存在，即使没有换行符，在 IE 8 中它是内联的，但在 IE 10 中它仍然不是内联的。对您来说，对于 IE 8 和 IE 10，div 是否以黑色背景显示为 inlnie（彼此并排）？另外，我的 html、css 和 javascript 都已经在正文中了：/ .
我的 IE10 中的一切看起来都很完美，使用完全相同的代码。尝试使用您的代码 sn-ps 和通用 for 循环创建一个全新的文件，它应该看起来不错。

和 之后，因此它应该出现在下一行，无论是内联还是块状。

和
之后，因此它应该出现在下一行，无论是内联还是块状。