Question

我有一个ASP：MENU，应用了一些CSS样式。我们在表格中指定的一个选项是每个元素的'height'和'line-height'为15px。这在IE中看起来很好，但在Chrome中太过局促。另外，我们对元素应用'border-bottom-style：dotted'。在IE中，该虚线等于表格元素的宽度。在Chrome中，它与文本的宽度相同。

我已经在Chrome和IE中的开发者工具中检查了该页面的代码，他们正在按要求接收样式。为什么它们的显示方式不同，这只是Chrome呈现网站方式的固有差异吗？如果是这种情况，可能需要使用不同的CSS样式表，具体取决于浏览器，除非我还能尝试其他内容吗？

<asp:Menu ID="menuSubLeft" runat="server" DataSourceID="sitemap_submenu"     
MaximumDynamicDisplayLevels="1">
<StaticMenuStyle CssClass="clienthome_submenuMenu" />
<StaticMenuItemStyle CssClass="clienthome_submenuItemMenu" />
<StaticSelectedStyle CssClass="clienthome_submenuSelectedStyle" />
<StaticHoverStyle CssClass="clienthome_submenuHoverStyle" />
<DynamicMenuItemStyle CssClass="clienthome_dynamicMenu_Item" />
<DynamicHoverStyle CssClass="clienthome_submenuHoverStyle" />
<DynamicMenuStyle CssClass="dynamicMenu_style_left" />
<DynamicSelectedStyle CssClass="clienthome_submenuSelectedStyle" />
</asp:Menu>

.clienthome_submenuItemMenu
{
border-bottom:dotted 1px #5a57a6;
height:15px;
line-height:15px;
padding:2px 0px 2px 5px;
color:#5A57A6;
}



    <table id="ctl00_ctl00_globalContent_menuSubLeft" 
    class="clienthome_submenuMenu ctl00_ctl00_globalContent_menuSubLeft_5 ctl00_ctl00_globalContent_menuSubLeft_2" 
    cellpadding="0" 
    cellspacing="0" 
    border="0">
    <tr onmouseover="Menu_HoverStatic(this)" 
    onmouseout="Menu_Unhover(this)" 
    onkeyup="Menu_Key(this)" title="Allows client to change their account password" id="ctl00_ctl00_globalContent_menuSubLeftn0">
        <td>
            <table class="clienthome_submenuItemMenu ctl00_ctl00_globalContent_menuSubLeft_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;width:100%;">
                        <a class="ctl00_ctl00_globalContent_menuSubLeft_1 clienthome_submenuItemMenu ctl00_ctl00_globalContent_menuSubLeft_3" href="/myprofile.aspx" style="border-style:none;font-size:1em;">My Profile</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

更新：经过几个小时的CSS游戏并无处可去/扔掉网站上的其他内容后，一位同事向我指出了一个简单的修复：我刚刚将以下代码添加到后面的代码中：

protected void Page_PreInit(object sender, EventArgs e)
    {
        if (Page.Request.ServerVariables["http_user_agent"].ToLower().Contains("safari"))
        {
            Page.ClientTarget = "uplevel";
        }
    }

Answer 1

这就像CSS PRECEDENCE

6.4级联

样式表可能有三个不同的来源：作者，用户和用户代理。

作者。作者根据文档语言的约定指定源文档的样式表。例如，在HTML中，样式表可以包含在文档中或外部链接。
用户：用户可以指定特定文档的样式信息。例如，用户可以指定包含样式表的文件，或者用户代理可以提供生成用户样式表的界面（或者表现得像它一样）。
用户代理：符合要求的用户代理必须应用默认样式表（或表现得如此）。 用户代理的默认样式表应以满足文档语言的一般表示期望的方式呈现文档语言的元素（例如，对于可视浏览器，HTML中的EM元素使用斜体字体呈现）。有关HTML文档的推荐默认样式表，请参阅HTML的示例样式表。

如果是这种情况，只需重置基本样式，以便删除块和表元素的填充和边距。

为什么IE和Chrome渲染css边框底宽不同？

1 个答案: