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>

來源

2010-08-09 P.Brian.Mackey

Firebug告訴你什麼？ – MikeWyatt 2010-08-09 15:18:31

是填充被overiden在另一個CSS文件中，也許？嘗試padding-left: 100px !important。

此外，正如我在我的評論中提到的，您應該安裝Firebug。它可以告訴你每個元素的實際計算出的填充值，並且它可以向你展示元素的確切尺寸（包括填充和邊距）的優秀視覺模型。

IE Developer Toolbar可以幫助IE。

來源

2010-08-09 15:20:17 MikeWyatt

我沒有創建其他的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中的填充值

回答

相關問題