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" />

これにより、コンディショナルを使用して特定のスタイルシートをロードできますが、ポール アイリッシュが提案する方法でコンディショナル 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 要素に特定のクラスを設定することで、使用するスタイル シートを既に切り替えているためです。

アップデート：

もう 1 つの可能性は、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" />

欠点は、.ie*クラスが html 要素にないため、.css の優先度の問題が発生する可能性があることです.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 の投稿ガイドラインにより適合するように編集されています。

私はこれ (2012 年 1 月 17 日付の Paul の投稿の下部から) を使用し、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 タグに追加できます。これは通常の Web サイトには理想的ではありませんが、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 に答える