我也遇到了样式表和图像的问题。
我不想使用 Base Href 解决方案并解决了我的问题,即更新我的相对路径以以单斜杠开头。
我的设置
nopCommerceStore 用于建立网上商店。
nopCommerce 使用“UrlRewritingNet.UrlRewrite”库来处理 url 重写。
nopCommerce 使用 ASP.NET 主题和皮肤来定义网上商店的外观。
在服务器端,您具有以下文件夹结构:
根
根/App_Themes/darkOrange/base.css
根/App_Themes/darkOrange/cart-checkout-order.css
根/App_Themes/darkOrange/category.css
root/App_Themes/darkOrange/css/ie6.css(这个文件最终被删除了)
根/App_Themes/darkOrange/img/transparent_image_example.png
根/css/ie6.css
根/MasterPages/Root.Master
根/Default.aspx 根/Category.aspx
当登陆默认页面(浏览器请求 http;//yourstore/default.aspx)时,您的 html 源代码将包含以下 html 代码:
<link href="App_Themes/darkOrange/base.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/darkOrange/cart-checkout-order.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/darkOrange/category.css" type="text/css" rel="stylesheet" />
...
浏览器将触发以下请求:
http;//yourstore/App_Themes/darkOrange/base.css
http;//yourstore/App_Themes/darkOrange/cart-checkout-order.css
http;//yourstore/App_Themes/darkOrange/category.css
...
当单击“书籍”类别时,浏览器会请求 http;//yourstore/Category/29-books.aspx) 您的 html 源代码将包含以下 html 代码:
<link href="../App_Themes/darkOrange/base.css" type="text/css" rel="stylesheet" />
<link href="../App_Themes/darkOrange/cart-checkout-order.css" type="text/css" rel="stylesheet" />
<link href="../App_Themes/darkOrange/category.css" type="text/css" rel="stylesheet" />
浏览器将触发以下请求:
http;//yourstore/Category/../App_Themes/darkOrange/base.css
http;//yourstore/Category/../App_Themes/darkOrange/cart-checkout-order.css
http;//yourstore/Category/../App_Themes/darkOrange/category.css
IE6中的透明PNG
到目前为止,一切运行良好。为了使所有浏览器的外观一致,需要加载 IE6 特定的样式表。我学到了两个重要的东西:
不要将样式表添加到“App_Themes”文件夹中,而是将其放在单独的文件夹中。
如果引用图像,请使用以单斜杠开头的相对路径。
样式表和“App_Themes”文件夹:
要将特定布局应用于在 IE6 中查看的页面,我创建了一个新样式表并将其放在“root/App_Themes/darkOrange/css”文件夹中。在“root/MasterPages/Root.Master”文件中,我添加了以下几行 html 代码:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
<![endif]-->
当 Css 文件放置在“App_Themes”文件夹或“App_Themes”内的子文件夹中时,它将自动被引用。这会在非 IE6 浏览器中导致不良行为。IE6 布局被应用到页面并弄乱了页面的外观。
当登陆默认页面(浏览器请求 http;//yourstore/default.aspx)时,服务器将解析请求。生成的 html 源代码将包含以下 html 代码:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
<![endif]-->
但 html 也包含以下行:
<link href="App_Themes/darkOrange/css/ie6.css" type="text/css" rel="stylesheet" />
所有浏览器都会触发以下请求:
http;//yourstore/App_Themes/darkOrange/css/ie6.css
IE6 将触发一个额外的请求(文件将从 IE 缓存中检索):
http;//yourstore/App_Themes/darkOrange/css/ie6.css
这是不受欢迎的行为,因此我不得不将“ie6.css”文件替换为新文件夹。它现在放置在“root/css/ie6.css”中。
引用图像、Url 重写和相对路径:
为了在 IE6 中支持透明 png 图像,ie6.css 文件包含一些 css 'filter' 属性。
例如,其中一个 div 选择器将包括以下 css 代码行:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='../App_Themes/darkOrange/img/transparent_image_example.png');
当登陆默认页面时(浏览器请求 http;//yourstore/default.aspx)IE6 会请求:
http;//yourstore/img/transparent_image_example.png
当点击“书籍”类别时,浏览器请求 http;//yourstore/Category/29-books.aspx) IE6 会请求:
http;//yourstore/img/transparent_image_example.png
两者都导致“找不到页面”(HTTP/1.1 404 Not Found)。
更换后:
'../App_Themes/darkOrange/img/transparent_image_example.png'
和:
'/App_Themes/darkOrange/img/transparent_image_example.png'
一切正常。
这是因为相对路径以单斜杠开头。浏览器将通过以下方式解释 url:
它是否以'http;//'开头?如果是,则必须是绝对路径;如果不是,它必须是相对路径。
相对路径:
它是否以单斜杠开头?如果是,它必须是“绝对路径引用”;如果不是,它必须是“相对路径引用”
注意:请参阅文档“统一资源标识符 (URI):通用语法”( http://www.ietf.org/rfc/rfc2396.txt )中的第 5 节“相对 URI 引用” 。
在 url 重写页面的情况下:
使用“相对路径引用”(例如“http;//yourstore/Category/29-books.aspx”和“../App_Themes/darkOrange/img/transparent_image_example.png”)时,浏览器将失败。
使用“绝对路径引用”(例如“http;//yourstore/Category/29-books.aspx”和“/App_Themes/darkOrange/img/transparent_image_example.png”)时,浏览器会成功。