2

我有一个应用了一些 CSS 样式的 ASP:MENU。我们在表格中指定的选项之一是每个元素的“高度”和“行高”均为 15 像素。这在 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";
        }
    }
4

1 回答 1

1

这有点像 CSS PRECEDENCE

6.4 级联

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

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

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

于 2013-02-12T15:33:28.167 回答