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

Question

我正在处理一些 HTML 代码，它是非常旧的代码，所以它不是我真正习惯看到的东西。我对代码做了一个小改动，移动了保存按钮，但是当我在我测试的每个浏览器(Firefox、Chrome、IE)中显示它时，它们看起来都不一样。 Firefox 以我希望的方式显示它

但是另外两个显示相同的页面，错误地使用完全相同的代码。即

Chrome

这是我的代码，请告诉我出了什么问题，我不确定如何解决这个问题。谢谢!

    <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 包裹父元素，直到最后一个元素存在，并且样式将针对所有浏览器进行更正。