使用Firefox和IE8但不在Chrome上的样式（居中vs text-align = left）

Question

我有一个包含多个标签和文本框的表单。

此表单在页面中居中，每个标签 文字对齐到左即可。它按预期在 firefox ，jsbin，jsfiddle上运行，但不在chrome 上。如果不对Chrome工作，我做错了什么？

以下是asp.net代码

<asp:Panel ID="PNL_Order" runat="server" HorizontalAlign="Center" Visible="False">
    <h1>Contact Details</h1>
    <asp:Label ID="label001" runat="server" Text="Name (First/Last)&lt;span style='color: red;'&gt;*&lt;/span&gt;" CssClass="labels"></asp:Label>
    <asp:TextBox ID="TXT_Name" runat="server" TabIndex="1" type="text" Width="150px" />
    <br />
    <!-- Removed other textboxes for clarity and readability -->
    <asp:Button ID="BT_confirmOrder" runat="server" TabIndex="5" Text="Confirm and send Query" Width="158px" />
</asp:Panel>

以下是链接到它的CSS：

.labels
{
    width: 175px;
    text-align: left;
    display: inline-block;
}

在Firefox中，它按预期显示：

Chrome无法按预期显示：

即使IE8也能正确解释它：

脚注

我想在Firefox上添加标签宽度为175像素，而在Chrome上它们宽度为125像素，不符合指定的宽度。

Answer 1

尝试在包含标签和文本框的面板中添加div容器：

<asp:Panel ID="PNL_Order" runat="server" Visible="False">
    <h1>Contact Details</h1>
<div style="text-align: center;">
    <asp:Label ID="label001" runat="server" Text="Name (First/Last)&lt;span style='color: red;'&gt;*&lt;/span&gt;" CssClass="labels"></asp:Label>
    <asp:TextBox ID="TXT_Name" runat="server" TabIndex="1" type="text" Width="150px" />
    <br />
    <!-- Removed other textboxes for clarity and readability -->
    <asp:Button ID="BT_confirmOrder" runat="server" TabIndex="5" Text="Confirm and send Query" Width="158px" />
</div>
</asp:Panel>

Answer 2

我刚刚发现是什么导致了这个问题与deebs的评论 似乎asp:Panel HorizontalAlign="Center"会覆盖之后制作的任何文本对齐（在框中）。

该问题的解决方案是用居中的div围绕中心区域：

<asp:Panel ID="PNL_Order" runat="server" Visible="False">
    <div style="text-align:center;">
        <!-- Your centered items with text-align=left -->
    </div>
</asp:Panel>

这修复了Chrome。

我仍然觉得这只奇怪的是只有Chrome中的bug，还有任何关于它为什么会发生的想法？