样式适用于 Firefox 和 IE8，但不适用于 Chrome（居中与 text-align=left）答案

【问题标题】：Styling working on Firefox AND IE8 but NOT on Chrome (Centered vs text-align=left)样式适用于 Firefox 和 IE8，但不适用于 Chrome（居中与 text-align=left）
【发布时间】：2014-08-23 06:07:43
【问题描述】：

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

这个表单在页面中居中，每个标签都文本对齐到左。它可以在 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 像素宽，它也不遵循指定的宽度。

【问题讨论】：

如果您将 URL 发布到图像（带有 imgur 的主机...），我们可以编辑问题以将它们插入...
@Mathlight 我在问题中添加了 URL，您能否编辑它以正确插入图像？谢谢。
基本问题 - 您是否在页面顶部使用 doctype？是标准模式还是怪癖模式？此外，您应该根据 stackoverflow.com/questions/493801/html-label-tag-and-asp-net 使用 AssociatedControlId 属性将标签与其输入相关联
@Ruskin <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 5.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 它应该处于标准模式（默认情况下，对吗？）。感谢将标签与其输入相关联的提示，我刚刚添加了该功能。
看起来 Chrome 将 asp:label 解释为跨度（我不知道，我对此很陌生）。是否有另一种样式可以覆盖可能与跨度相关的 CSS？（可以通过将 !important 添加到 text-align:left 来测试）因为它在 Chrome 中对我来说看起来不错。不确定您是否使用它，但在 Chrome 中右键单击该字段并选择“检查元素”...然后从那里即时查看和编辑。这救了我无数次。

标签： css asp.net google-chrome http firefox

【解决方案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>

【讨论】：

这样that。虽然我想让它做that。由于您的帖子，我发现了如何：像这样<div style="text-align: center;"> 放置您插入的div。我会接受您的回答，包括此更改。非常感谢您的帮助。

【解决方案2】：

我刚刚发现了由 deebs 制成的 cmets 导致此问题的原因。
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 很奇怪，有没有想过为什么会这样？

【讨论】：