Question

愚蠢的IE9搞砸了我的aspx页面的布局。在chrome中它看起来很完美： enter image description here

然而在EI9中，它搞砸了我的布局并使它看起来像这样： enter image description here

我已经弄明白为什么它看起来像这样。显然，IE9在div中封装了我的“保存注释”按钮，描述标签和描述文本框，并使其向右浮动。并且maincontent holder显示为double的原因是因为IE复制了它，但是在重复的contentholder中，它没有控件或其中的任何内容。只是背景颜色。

这是它生成的html：

 <div class="mainContentHolder">
    <span style="display: none;">
        <label>File</label>
        <label style="width: auto;" id="lblCaseFileID">2011630988 - </label>
    </span>
    <h3 id="quickNoteHeader">Quick Note: 2011630988 / 10/04/2012 08:47:12 <div style="float: right;">USES CURRENT DATE AND TIME<div></div></div></h3><div style="float: right;"><div>

    <span>
        <label class="inlineLbl">Description</label>
        <input style="width: 82%;" id="txtDescription" name="txtDescription" type="text">
        <span style="color: red; display: none;" id="ctl02" class="validation" title="Description is required">*</span>
        <input style="width: 75px;" id="saveNote" onclick="saveNewQuickNote()" name="saveNote" value="Save Note" type="button">
    </span>
    </div>
    <input id="hidCaseFileID" name="hidCaseFileID" value="2011630988" type="hidden">
    <input id="hidInvestigatorLoggedOnID" name="hidInvestigatorLoggedOnID" value="25" type="hidden">
</div>

<div class="mainContentHolder">
<div style="float: right;">
</div>

这是我的.aspx页面：

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        </head>
    <body>
    <form id="form1" runat="server">
    <div class="mainContentHolder">
    <span style="display:none;">
        <label>File</label>
        <label style="width:auto;" runat="server" id="lblCaseFileID"></label>
    </span>
    <h3 runat="server" id="quickNoteHeader">Quick Note</h3>
    <span>
        <label class="inlineLbl">Description</label>
        <input type="text" style="width:82%;" id="txtDescription" runat="server" />
        <asp:RequiredFieldValidator class="validation" ErrorMessage="*" Display="Dynamic" ControlToValidate="txtDescription" ToolTip="Description is required" runat="server" />
        <input type="button" ID="saveNote" style="width:75px;" Value="Save Note" runat="server" onclick="saveNewQuickNote()" />
    </span>
    </div>
    <asp:HiddenField ID="hidCaseFileID" runat="server" />
    <asp:HiddenField ID="hidInvestigatorLoggedOnID" runat="server" />
    </form>
</body>

有什么建议吗？我不知道为什么IE这样做或如何防止/修复它编辑： CSS：.mainContentHolder { margin: 0px; background-color: #f3f3f3; border: solid 1px #a1a1a1; min-width:890px; width:920px; height:50px; } .mainContentHolder h3 { font-size:13px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; margin-right: 1%; } .mainContentHolder label { font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; margin-bottom: 10px; margin-right: 1%; } .mainContentHolder input { width:70px; } .ui-dialog { font-size:12px; } .ui-widget-header { background: #8D122B; } .ui-datepicker { font-size:12px; } #quickNoteHeader { color: Green; }

编辑 - 似乎布局在IE 10中可行。但不是IE9

Answer 1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <html xmlns="http://www.w3.org/1999/xhtml">
</head>

无效的HTML。

你想：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  </head>

不要忘记结束</html>标记。

Answer 2

更正您的doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  </head>

并设置显示块和宽度100％的范围

<span style="display:block;width:100%;">
        <label class="inlineLbl">Description</label>
        <input type="text" style="width:82%;" id="txtDescription" runat="server" />
        <asp:RequiredFieldValidator class="validation" ErrorMessage="*" Display="Dynamic" ControlToValidate="txtDescription" ToolTip="Description is required" runat="server" />
        <input type="button" ID="saveNote" style="width:75px;" Value="Save Note" runat="server" onclick="saveNewQuickNote()" />
    </span>

Answer 3

亲爱的约翰，当我把这个代码放在我的本地网站上时......

enter image description here

我认为另一个css是冲突..

Internet Explorer将我的代码放在不需要的div中

3 个答案: