4

SharePoint コンテンツ エディター Web パーツにコンテンツを追加しようとしていますが、追加すると、CSS の一部が無視されているかのように表示されます。

スタンドアロン ページの場合、Firefox 3.6 および IE 8 では問題なく表示されますが、同じコードがコンテンツ エディター Web パーツに配置されるとすべて表示されなくなります。

多くの場合、IE で表示したときに SharePoint で壊れているものは、同じ SharePoint ページを FF で表示すると正しく表示されます。今回はメニューが正しくレイアウトされましたが、テキストの色が間違っていました (白のはずです)。

IE の Developer Tools を使用してコードを調べると、Sharepoint は#CAPMenu liの の宣言を無視しているようですheight:0;。SharePoint 以外でコードを表示するとき、または Firefox を使用して SharePoint でコードを表示するときに無効height:0;にすると、メニューが少し崩れます。IE を使用して SharePoint でページを表示すると、メニューは既に固定されており、無効にしheight:0;ても変更はありません...

助けてください！これは、SharePoint によって私が使用できなくなった最初のデザインではありません。

20101130 の編集: SharePoint 2007 がマスターページから発行するコードの状態に関する記事 ( http://friendlybit.com/html/default-html-in-sharepoint-2007/ ) を見つけました。私のコードをマッシュアップしています...

最初の行に doctype がないと、事態は非常に悪くなります:
<HTML xmlns:o="urn:schemas-microsoft-com:office:office" dir="ltr" __expr-val-dir="ltr">'
これは、すべてのデフォルト ページが quirks モードでレンダリングされることを意味し、ブラウザ間でのレンダリングが信頼できなくなります。

20120921 の編集: 2010 年に移行して以来、SP はコードを修正しようとして、コードを解体します。最終的に、サイト ライブラリに保存されている HTML ファイルに CEWP をリンクし、ファイル内のコードを Web パーツに読み込むことができることがわかりました。SharePoint はファイルを編集できないため、私のコードはクリーンで元のままです :-)

4

2 に答える 2

6

CSS を任意の SharePoint Web パーツ、特にコンテンツ エディター Web パーツに適切に適用するのは少し難しい場合があります。

その主な理由は、SharePoint が一連のテーブルを生成し、そのテーブル内に Web パーツを貼り付けることです。

SharePoint は、次の HTML 構造をすべての Web パーツ ゾーンにも追加します。

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody>
        <tr>
            <td valign="top" id="MSOZoneCell_WebPartWPQ3">
                 <!--Your web part HTML starts here in most cases-->

また、そのテーブルとそれに含まれる要素に多くの CSS ルールを適用します。SharePoint のすべての CSS ルールは、core.css ファイル (12 ハイブにあります) で定義されています。そのファイルを変更することはお勧めしませんが、コードに影響するルールを分析することはできます。

.ms-WPHeader .ms-WPBodyスタイルを適用するには、(Web パーツのヘッダーと本文の)などのいくつかのルールをオーバーライドする必要があります。

コードに影響を与えているスタイルを見つける最良の方法は、firefox で Firebug を使用することです。コードが壊れている理由を (Firefox で) 正確に理解したら、すべてのブラウザーでページを同時に修正する可能性が高くなります (小さなものを除く)。最初はブラウザー間の互換性について心配する必要はありません。core.css のルールを理解することだけを考えてください。

!重要なハックによってコードの動作が速くなるのは事実ですが、その道をたどると、CSS シートはすぐに保守できなくなります。

編集 ルールが .ms-WPBody をオーバーライドすることを確認するには (フォント サイズなど)、SharePoint よりも具体的にすることができます。つまり、 aa web part 内にコンテンツがあるとします。

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody>
        <tr>
            <td valign="top" id="MSOZoneCell_WebPartWPQ3">
                <div class="my-content">Your content</div>
            </td>
        </tr>
     </tbody>
</table>

次に、次のような CSS ルールを作成します。

.ms-WPBody .my-content
{
    font-size : 12pt;
    /*Other rules you want to override*/
}

これは、SharePoint が適用するものよりも具体的であるため、スタイルシートが優先されます。

国境の質問に関しては、実際の例やコードを見ないと、どのルールが失敗しているかを知るのは非常に困難です.

ただし、これらのルールを試して、何か効果があるかどうかを確認できます。どのルールが問題なのかを調べる必要がある場合は、重要なハックを使用してください。適切にオーバーライドして !important を削除します:これは、境界線が必要ないことを前提としています...

.ms-WPBorder, .ms-WPBorderBorderOnly
{
    border: none !important;
}

.ms-PostTitle td
{
    border: none !important;
}

td.ms-PostTitle
{
    border: none !important;
}
于 2010-11-24T14:28:11.373 に答える
0

Sharepoint は CMS ソフトウェアであり、ページのコードを動的に生成し、同様に CSS クラスをタグに割り当てます。これらのクラスには、スタイルシートで定義されたいくつかのプロパティがあります。これらのスタイルをオーバーライドするには、スタイルシートで「!important」キーワードを使用します。例えば

.class{ プロパティ:値 !重要; }

Sharepoint を使用したことがない場合でも、これが役立つことを願っています。

于 2010-11-24T05:33:30.097 に答える