为啥 IE 和 Chrome 呈现 css 边框底部宽度不同？

Posted 2023-03-05

【中文标题】为啥 IE 和 Chrome 呈现 css 边框底部宽度不同？

【英文标题】：Why are IE and Chrome rendering css border-bottom-width differently?为什么 IE 和 Chrome 呈现 css 边框底部宽度不同？

【发布时间】：2013-01-27 22:54:03

【问题描述】：

我有一个应用了一些 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" >
                <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";
        
    

【问题讨论】：

请向我们展示您的代码。

请给我们看对比图

我们需要渲染的html，而不是asp代码。

好的，我已经尽力整理 HTML，希望对您有所帮助...

永远，永远不要使用 IE 作为事情应该如何工作的参考。总是，总是寻找任何其他浏览器。你永远不能相信 IE 会做正确的事。

【参考方案1】：

这有点像 CSS PRECEDENCE

6.4 级联

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

作者。作者根据文档语言的约定为源文档指定样式表。例如，在 HTML 中，样式表可能包含在文档中或外部链接。 用户：用户可以为特定文档指定样式信息。例如，用户可以指定一个包含样式表的文件，或者用户代理可以提供一个界面来生成用户样式表（或表现得好像它确实如此）。

用户代理

：符合标准的用户代理必须应用默认样式表（或表现得像他们那样）。

用户代理的默认样式表

应该以满足文档语言的一般呈现期望的方式呈现文档语言的元素（例如，对于可视浏览器，HTML 中的 EM 元素使用斜体字体呈现）。有关推荐的 HTML 文档默认样式表，请参阅 HTML 示例样式表。

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

【讨论】：

好的，感谢您的指点。网页设计不是我的强项，你可能已经猜到了，我会看看这个。