样式适用于 Firefox 和 IE8，但不适用于 Chrome（居中与 text-align=left）
Posted
技术标签:
【中文标题】样式适用于 Firefox 和 IE8，但不适用于 Chrome（居中与 text-align=left）【英文标题】：Styling working on Firefox AND IE8 but NOT on Chrome (Centered vs 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)<span style='color: red;'>*</span>" 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？是标准模式还是怪癖模式？此外，您应该根据 ***.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 中右键单击该字段并选择“检查元素”...然后从那里即时查看和编辑。这救了我无数次。
【参考方案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)<span style='color: red;'>*</span>" 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 很奇怪，有没有想过为什么会这样？
【讨论】：
以上是关于样式适用于 Firefox 和 IE8，但不适用于 Chrome（居中与 text-align=left）的主要内容，如果未能解决你的问题，请参考以下文章
CSS 不适用于 IE 和 Firefox，但适用于 Chrome
Div 100% 高度适用于 Firefox，但不适用于 IE
媒体查询适用于移动版Firefox但不适用于移动版Chrome
ScrollTop 适用于 Chrome 和 Edge，但不适用于 Firefox