在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和图像

回答

相关问题