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

问题描述：

我设置了荒谬的填充值，并且无法使用填充将总宽度扩展到内容大小以外。 FF是否应该遵循一个“框模型”，即填充内容被添加到内容大小？这是相关的代码。ASP.NET菜单控件不尊重IE或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>

Firebug告诉你什么？ – MikeWyatt 2010-08-09 15:18:31

答

是填充被overiden在另一个CSS文件中，也许？尝试padding-left: 100px !important。

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

IE Developer Toolbar可以帮助IE。

我没有创建其他的CSS文件，你有简化例子中的所有代码。我从来没有使用过FireBug，但是从我可以收集的填充 - 左值全部“划掉”/禁用。在我的Style中有一个ID选择器，名为#MenuMain（asp.net菜单项的ID）。这个ID选择器不是由我创建的，所以它必须由控件本身生成。 – 2010-08-09 15:35:36

！重要的诀窍！很好，我以前没见过那个。 – 2010-08-09 15:47:45

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

相关推荐