不同的浏览器以不同的方式显示HTML

Question

我正在研究一些HTML代码，它真的很老的代码，所以它不是我真正常常看到的东西。我对代码进行了一些小改动，移动了保存按钮，但是当我在每个浏览器中显示它时，我在Firefox，Chrome，IE上看起来都不一样。 Firefox以我想要的方式显示

但是其他两个显示相同的页面，错误地使用相同的确切代码。 IE

铬

这是我的代码，请让我知道出了什么问题我不知道如何解决这个问题。谢谢！

    <div id="textdefaults" runat="server">
    <div>
    <asp:Button ID="btnSubmitTextDefaults" Text="Save" runat="server" Height="29px" style="margin-left: 900px" Width="64px" OnClick="btnSubmitTextDefaults_Click" OnClientClick="SaveLanguage();" />
    </div>
    <div class="aTab">
        <asp:UpdatePanel ID="upTextDefaults" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="aTab">
                <TagUpdate:TextDefaults id="myTextDefaults" runat="Server" />
                    <asp:UpdateProgress ID="UpdateProgress3" runat="server">
                        <ProgressTemplate>
                            <div class="progress">
                            <asp:Image ID="imgTextDefaults" runat="server" ImageUrl="~/Bannerlink/Images/ajax-loader-big.gif" />Saving...
                            </div>
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnSubmitTextDefaults" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
   <br />
</div>

Answer 1

实际上发生的事情是父div没有被包裹到最后一个元素。

在下面创建父div样式，

#ContainerContent { 
   width: 992px; 
   text-align: left; 
   clear: both; 
   /* margin-left:auto; 
   margin-right:auto; */
   display: inline-block;  
} 

并添加下面提到的div作为'#ContainerContent'div中的最后一个元素。

<div style="clear: both;"></div>

这个div包装了父元素，直到最后一个元素存在，并且所有浏览器都会更正样式。