5

我想使用来自 Boilerplate HTML 模板的 Paul Irish 的条件注释:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

在 SharePoint 2010 母版页中。我读过“条件注释在 SP2010 中并不总是那么好用”。(不知道这意味着什么!)建议使用:

<SharePoint:CSSRegistration Name="foo.css" ConditionalExpression="gte IE 7" runat="server" />

这允许我使用条件来加载特定的样式表,但不能像 Paul Irish 建议的那样使用 Conditional html 标签。有没有办法做到这一点,或者我可以简单地将 Biolerplate 中的代码粘贴到 Sharepoint 母版页中?

4

5 回答 5

4

我假设 SharePoint 母版页等于 ASP.NET (MVC) 中的母版页。因此,这根本不应该是一个问题。

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

前面的代码所做的只是在 HTML 标记上使用不同的 CSS 类设置 HTML 标记,具体取决于访问该站点的浏览器。这样您就可以覆盖任何给定浏览器 (IE) 的一些样式表。

site.css

.coloredBackground
{
    background-color: #FF0000; //red
}
.ie6 .coloredBackground
{
    background-color: #00FF00; //green
}
.ie8 .coloredBackground
{
    background-color: #0000FF; //blue
}

在此示例中,使用 Firefox、Opera、Safari、IE7、9、10 浏览的用户将看到红色背景。对于 IE6,背景颜色被绿色覆盖,在 IE8 中被蓝色覆盖。

您的 CSS 注册将如下所示:

<SharePoint:CSSRegistration Name="site.css" runat="server" />

如您所见,在 CSS 注册中不再需要设置 ConditionalExpression,因为您已经通过在 HTML 元素上设置特定类来切换使用的样式表。

更新:

另一种可能性是根据浏览器版本使用 SharePoint aspx 控件上的 ConditionalExpression 属性包含另一个样式表文件。

<SharePoint:CSSRegistration Name="ie6.css" ConditionalExpression="lt IE 7" runat="server" />
<SharePoint:CSSRegistration Name="ie7.css" ConditionalExpression="IE 7" runat="server" />
<SharePoint:CSSRegistration Name="ie8.css" ConditionalExpression="IE 8" runat="server" />
<SharePoint:CSSRegistration Name="ie9.css" ConditionalExpression="IE 9" runat="server" />

缺点是您可能会遇到 css 优先级问题,因为.ie*html 元素上缺少该类,因此不会推翻.class-to-override-if-specific-ie-version. !important您可以通过使用特定样式表文件中的规则来解决这个问题。

于 2011-07-31T00:47:55.980 回答
3

我对 SharePoint 品牌非常陌生,并且遇到了同样的问题。我不是 ASP 开发人员,所以理解一些解决方案有点困难。

我所做的是将 Paul 的条件语句与 HTML 标记一起移动到 BODY 标记中,它似乎工作得非常完美,而不必与 SP 代码混淆。

<!--[if lt IE 7]> <body class="no-js lt-ie9 lt-ie8 lt-ie7" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if IE 7]> <body class="no-js lt-ie9 lt-ie8" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if IE 8]> <body class="no-js lt-ie9" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if gt IE 8]><!--> <body class="no-js" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <!--<![endif]-->

希望有帮助。

于 2012-11-09T05:36:56.687 回答
2

再次发帖,因为我的第一个回复被删除了。这已被编辑以更好地符合 StackOverflow 的发布指南。

我使用了这个(来自 Paul 帖子的底部,日期为 2012 年 1 月 17 日),它在 SharePoint 母版页中运行良好。请注意,这与您发布的内容不同,后者是代码的早期版本。

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->

我担心的是 SharePoint 页面可能需要删除的其他内容。这是原始的 SharePoint HTML 标记:

<html lang="<%$Resources:wss,language_value%>" dir="<%$Resources:wss,multipages_direction_dir_value%>" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr">

一旦您开始在带有条件注释的 HTML 标记中添加这些内容,页面就会中断。

我敦促您也检查您的 HTML/CSS,看看是否可以删除一些条件 CSS 以帮助简化您的解决方案。

于 2012-07-19T18:19:51.207 回答
1

我使用 ASP 文字字符串在我的 SP2010 母版页中传递条件 IE 注释。

这样,我仍然可以传入原始<html>标签中使用的语言值,<%$Resources:wss,language_value%>.

&lt;asp:literal ID=&quot;html1a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if lt IE 7]&amp;gt; &amp;lt;html class=&amp;quot;no-js lt-ie9 lt-ie8 lt-ie7&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html1b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html1c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;![endif]--&amp;gt;&quot;/&gt;<br />
&lt;asp:literal ID=&quot;html2a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if IE 7]&amp;gt;&amp;lt;html class=&amp;quot;no-js lt-ie9 lt-ie8&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html2b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html2c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;![endif]--&amp;gt;&quot;/&gt;<br />
&lt;asp:literal ID=&quot;html3a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if IE 8]&amp;gt;&amp;lt;html class=&amp;quot;no-js lt-ie9&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html3b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html3c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;![endif]--&amp;gt;&quot;/&gt;<br />
&lt;asp:literal ID=&quot;html4a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if gt IE 8]&amp;gt;&amp;lt;!--&amp;gt; &amp;lt;html class=&amp;quot;no-js&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html4b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html4c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;!--&amp;lt;![endif]--&amp;gt;&quot;/&gt;

但如果有人可以进一步改进这种方法,将不胜感激!

于 2012-06-08T20:08:43.033 回答
0

对于 Sharepoint 2010,最好避免在<html>标签周围放置条件。话虽如此,您可以在<head>标签中添加条件,并使用 Javascript 将类添加到您的 html 标签。这对于常规网站来说并不理想,但对于 Sharepoint,这是一种不引人注目的方法,适用于我帮助维护的大型企业 Sharepoint 2010 网站:

...
<html id="Html1" class="no-js" lang="<%$Resources:wss,language_value %>" dir="<%$Resources:wss,multipages_direction_dir_value %>" runat="server" __expr-val-dir="ltr">
    <head id="Head1" runat="server">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=8" />
        <meta http-equiv="Expires" content="0"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- IE version conditionals will apply classes to html element if old IE -->
        <!--[if lt IE 7 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie7";</script><![endif]-->
        <!--[if lt IE 8 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie8";</script><![endif]-->
        <!--[if lt IE 9 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie9";</script><![endif]-->
        <!--[if lt IE 10 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie10";</script><![endif]-->  
        ...
于 2013-09-26T17:58:03.500 回答