Question

我最近编写了一些代码，其中有几个jQuery UI模式对话框。在每个模态对话框中，我不想要jQuery提供的默认标题栏，所以我在对话框代码的create函数中使用了这行代码：

$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").css("display","none");

然后我以这种方式填写模态对话框的内容：

HTML

<div id="helpdialog" class="helpbox">
    <header id="helptitle">Help</header>    
    <p id="helptext">
        The aim of the game is to escape the maze by forming a correct sentence that ends on one of the edges of the grid.<br><br>
        From each square you can only move to one of the highlighted squares. Choose the only word that can correctly follow the word in the square that you are in and click on it.Move one square at a time, forming a sentence, until you reach one of the edges of the grid or until it is impossible to extend your sentence further. Click on Submit.<br><br>
        To undo your selections click on the squares you want to deselect in the reverse order to that in which you selected them (they will be numbered).<br><br>
        If you click on Reveal, the sentence will be shown for two seconds, and then you'll be able to resume playing.<br><br>
        In the Single player game find all of the sentences in the shortest time possible. 
    </p>
</div>

CSS

#helptitle {
    height: 1.5em;
    width: 100%;
    background-color: #d9d3ed;
    text-align: center;
    font-size: 1.3em;
    font-family: Dejavu, Verdana, Arial, sans-serif;
}
#helptext { 
    font-size: 0.9em;
    padding: .5em;
    font-weight: normal;
    margin-top: 0; 
}

嗯，问题是没有任何CSS属性似乎只适用于header标记仅适用于较低版本的IE 。虽然应用了p标记的CSS。在所有其他浏览器中，它工作正常。我是否需要使用更具体的选择器或是否存在其他问题？

Answer 1

这是因为<header>标记仅支持as of IE9，而不是之前。

一种解决方案是将标题中div中的所有文本作为目标，然后更具体地针对段落文本进行定位，例如

div {
    color:red;
}

div > p {
    color:blue;
}

这是一个jsFiddle示例。

Answer 2

这需要HTML5 Shiv！

Answer 3

IE 8及更低版本不会对未知元素应用任何样式。查看here了解更多信息。

CSS未应用于IE中模式对话框中的内容

HTML

CSS

3 个答案: