Question

我设置了荒谬的填充值，无法使用填充来扩展总宽度超出内容大小。是不是FF应该遵循“盒子模型”，从而将填充添加到内容大小？这是相关的代码。

环境： IE7，FF 3.6.8

CSS：

.StaticMenuStyle
{
    width: auto;
    background-image: url(../images/nav_repeat.gif);
    background-repeat:repeat-x;
    padding-left: 100px;
    /*padding-top: 10px;
    margin-top: 10px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;*/
    float:left;
}  
.StaticMenuStyle a:link
{
    padding-left: 100px;
    text-decoration: none;
}  
.StaticMenuItemStyle
{
    height: 38px;
    /*min-width: 75px;*/
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align: center;    
    color:#006c56;
    padding-left: 100px;
    /*padding-left: 100px;
    padding-right: 8px;
    padding-top: 0px;
    padding-bottom: 0px;
    border:5px solid clear;
    /*margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;*/
    /*background: right 50% url(../images/nav_div.gif) no-repeat;*/
    background-image: url(../images/nav_div.gif);
    background-repeat:no-repeat;
    background-position:right;
    /*text-indent:5px;*/
}
/*
.StaticSelectedStyle
{
    color:#006c56;
    height: 38px;
    background-image: url(../images/nav_over.gif);
    background-position:center bottom;
    overflow:hidden;
}
*/
.StaticHoverStyle
{
    /*color:Black;*/
    /*color:White;*/
    /*height: 38px;*/
    /*background-image: url(../images/nav_over.gif);*/
    /*background-position:center bottom;*/
    /*overflow:hidden;*/
}
.StaticMenuStyle a:hover
{
    /*background-image: none;*/
    height: 38px;
    background-image: url(../images/nav_over.gif);
    background-position:center bottom;
    color:Black;
    text-decoration: none;
}
.DynamicMenuStyle
{
    height: 38px;
    /*width: auto;*/
}

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SJMTemplateDot4.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false"  />
     <asp:Menu 
                ID="MenuMain" 
                runat="server" 
                DataSourceID="SiteMapDataSource2"
                Orientation="Horizontal"
                StaticMenuStyle-cssClass="StaticMenuStyle"
                StaticMenuItemStyle-cssClass="StaticMenuItemStyle"
                StaticHoverStyle-cssClass="StaticHoverStyle"
                />
    </div>
    </form>
</body>
</html>

Answer 1

填充是否可能在另一个CSS文件中过度？试试padding-left: 100px !important。

另外，正如我在评论中提到的，您应该安装Firebug。它可以告诉你每个元素的实际计算填充值，它可以显示元素精确尺寸的优秀视觉模型，包括填充和边距。

IE Developer Toolbar可以帮助IE。

ASP.NET菜单控件不考虑IE或FF中的填充值

1 个答案: