在ASP.NET MVC中處理CSS和圖像

嗨，我正在開發基於ASP.NET MVC的簡單應用程序。我已經改變了默認master.css我有我自己的風格。現在唯一的問題是，我添加背景圖像屬性到我的一個UL-> Li-> A來創建菜單。它在Firefox中工作正常，但在IE瀏覽器（IE7/8）中根本沒有顯示圖像。有沒有人有線索發生了什麼問題？在ASP.NET MVC中處理CSS和圖像

我的CSS正在關注;

 #nav-menu ul 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    color:White; 
} 
#nav-menu li 
{ 
    /*float: left;*/ 
    margin: 0.15em 0.15em; 
    display:block; 

} 

#nav-menu li a 
{ 
    background-image: url('/Images/leftbarlightblue.jpg'); 
    background-repeat:no-repeat; 
    background-position:bottom; 

    height: 2em; 
    line-height: 2em; 
    width: 12em; 
    display: block; 
    text-decoration: none; 
    text-align: center; 
    color: white; 
} 

#nav-menu li a:hover 
{ 
    background-image: url('./Images/leftbardarkblue.jpg'); 
    background-repeat:no-repeat; 
    background-position:bottom; 

    height: 2em; 
    line-height: 2em; 

    width: 12em; 
    display: block; 

    color: white; 
    text-decoration: none; 
    text-align: center; 
} 
#nav-menu 
{ 
    width:15em 
}

而XHTML是

<div id="menucontainer"> 
      <div id="nav-menu"> 
       <ul> 
        <li><%= Html.ActionLink("Home", "Index", "Home")%></li> 
        <li><%= Html.ActionLink("About Us", "About", "Home")%></li>     
       </ul> 
      </div> 

    </div>

是的，我試圖與./Images/...但它仍然沒有奏效。

以下是我的文件夾層次

Solution -> Content 
       Site.css 
       Images 
         logo.jpg 
         leftbarlightblue.jpg 
     ->Controllers 
     -> Models 
     ->Views 
      Home 
      Shared 
        Site.Master

來源

2009-01-13 Gripsoft

我得到了問題，使用CMYK創建圖像。所以FF使用近似顏色顯示它們，而Internet Explorer完全忽略它們。更改格式可以解決問題。謝謝你們的幫助。

來源

2009-01-13 12:28:03 Gripsoft

添加XHTMLfor＃導航菜單，此外，如果你有這個問題後的實時鏈接，以及

來源

2009-01-13 11:44:48

的目錄結構，將有助於太 – annakata 2009-01-13 11:46:46

我猜顯示器取決於網址。

您的master.css位於何處？

您是否試過url('Images/leftbarlightblue.jpg')？

來源

2009-01-13 11:45:09

如果你使用CSS很多，我真的推薦FireFox和FireBug，它可以讓你在運行中查看你的樣式表，並確切地看到爲什麼某些事情不起作用。

接下來，您是否仔細檢查了URL是否正確？檢查的一種快速方法是獲取絕對URL（在瀏覽器中瀏覽它以確保它應該類似於http://myapp/content/images/leftbarlightblue.jpg），並將其放在代碼中而不是舊圖像URL。如果加載那麼它可能是你的相對路徑是錯誤的（.. /部分），因爲我不知道你的文件夾結構，我不能幫你應該是什麼。

在單獨的背景上，背景位置應該有水平位置，然後是veritcal位置。

background-position：left bottom;

來源

2009-01-13 11:49:15

感謝您的幫助，我有螢火蟲在IE FF和開發工具也一樣，我再次通過把該leftbarlightblue.jpg在檢查烏爾建議html頁面本身。同樣的問題現在再次存在，它正在FIREFOX正確顯示，但不在IE瀏覽器6/7/8 – Gripsoft 2009-01-13 12:00:49

如果你直接在IE瀏覽器的圖像顯示？我只見過一個圖像顯示在一個瀏覽器中，但沒有看到另一個圖像有點「狡猾」。在編輯器中打開圖像並重新保存，然後嘗試再次加載圖像，確保緩存清除。 – 2009-01-13 12:16:31

嘗試開始圖像路徑，沒有所有多餘的點和斜線。例如：

/images/image.jpg

而不是

../../images/image.jpg

我仍然不知道這些文件是如何存儲你的實際的網絡服務器，所以你可能需要添加一個或兩個目錄，但它通常是不明智之舉使用點來告訴服務器在目錄樹中有多少層次要去（加上很多人忘記了你需要指定圖像的位置，從CSS文件的位置看，不一定是HTML/ASP文件的位置）

來源

2009-01-13 12:56:44

你的樣式表需要使用文字路徑，如下所示：

background-image: url('/Content/Images/leftbarlightblue.jpg');

，而不是

background-image: url('/Images/leftbarlightblue.jpg');

來源

2009-01-13 13:27:59 Mark79

在ASP.NET MVC中處理CSS和圖像

回答

相關問題