Question

我正在尝试在dotnetnuke框架中实现媒体查询。有没有办法有条件地选择使用什么CSS？我试图阻止没有媒体查询支持的IE6 / 7/8不能访问媒体查询CSS：

继承人并从我的代码中提取不起作用：

<%@ Register TagPrefix="ddn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
<%@ Register TagPrefix="ddn" TagName="MOBMENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>

<![if !(IE 6)|(IE 7)|(IE 8)]>
    <dnn:DnnCssInclude runat="server" FilePath="mq.css" PathNameAlias="SkinPath" />                    
<![endif]>


        <div id="wrapper">


            <div id="header">
                <div id="logo">
                    <dnn:LOGO runat="server" id="dnnLOGO" />
                </div>

Answer 1

DnnCssInclude没有'Condition'属性，你必须使用这个皮肤对象：

<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
<dnn:STYLES runat="server" ID="StylesIE7" Name="IE7Minus" StyleSheet="ie7skin.css" Condition="LT IE 8" UseSkinPath="true"/>

上面的代码取自DNN6附带的DarkKnight皮肤。

您真的需要隐藏旧版浏览器的媒体查询吗？不支持媒体查询的浏览器只会忽略它们。

编辑：您的媒体查询的语法是什么？如果你使用

@media screen and (min-width: 300px) {.box  { background-color: red; }}

然后IE6,7会忽略它，我刚刚测试过它。如果你使用这样的东西：

@media screen {.box  { background-color: red; }}

或

@media screen, all and (min-width: 300px) {.box  { background-color: red; }}

然后IE6,7会选择那些风格。您可能需要调整语法。阅读this article，它已经过时但仍适用于IE6,7。

Answer 2

您可以使用此外观对象来实现CSS的条件加载：

40fingers style helper skin object

在dotnetnuke中选择CSS的条件语句

2 个答案: