Почему SharePoint неправильно отображает мой HTML и CSS контент?

Я пытаюсь добавить контент в веб-часть редактора контента SharePoint, но когда я это делаю, он отображается так, как будто он игнорирует части моего CSS.

Он хорошо отображается в Firefox 3.6 и IE 8, когда это отдельная страница, но отключается, когда тот же код помещается в веб-часть редактора контента: нажмите здесь, чтобы посмотреть

Часто вещи, которые не работают в SharePoint при просмотре через IE, отображаются правильно, когда одна и та же страница SharePoint просматривается в FF; на этот раз меню было выложено правильно, но текст был неправильного цвета (должен быть белым).

Когда я проверяю код с помощью инструментов разработчика IE, Sharepoint, кажется, игнорирует #CAPMenu liдекларация height:0;, Если я отключу height:0; при просмотре кода вне SharePoint или в SharePoint с Firefox меню немного разваливается. Когда я просматриваю страницу в SharePoint через IE, меню уже скрыто и отключено height:0; не меняет...

Пожалуйста помоги! Это не первый дизайн, который SharePoint не позволяет мне использовать.

Изменить на 20101130: я нашел статью ( http://friendlybit.com/html/default-html-in-sharepoint-2007/) о состоянии кода, который SharePoint 2007 публикует со своей главной страницы, и статья начинается с того, что я думаю пюреет мой код...

Все начинается очень плохо, без доктайпа в первой строке:
<HTML xmlns:o="urn:schemas-microsoft-com:office:office" dir = "ltr" __expr-val-dir = "ltr"> '
Это означает, что все страницы по умолчанию будут отображаться в режиме причуд, делая рендеринг ненадежным во всех браузерах.

Изменить на 20120921: С тех пор мы перешли на 2010 год, и, хотя лучше, SP будет по-прежнему разделывать мой код в попытке исправить его. В конце концов я понял, что могу связать CEWP с файлом HTML, сохраненным в библиотеке сайта, и получить код в файле, загружаемый в веб-часть. Поскольку SharePoint не может редактировать файл, мой код выглядит чистым и нетронутым:-)

Источник

2 ответа

Решение

Может быть немного сложно заставить ваш CSS правильно применяться в любой веб-части SharePoint, особенно в веб-частях редактора контента.

Основная причина этого заключается в том, что SharePoint генерирует кучу таблиц и помещает вашу веб-часть в эту таблицу.

SharePoint добавляет следующую структуру HTML для всех зон веб-частей:

<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 к этой таблице и к содержащимся в ней элементам. Все правила CSS для SharePoint определены в файле core.css (который вы можете найти в 12 кусте). Хотя я не рекомендую вам изменять этот файл, вы можете проанализировать те правила, которые влияют на ваш код.

Вам нужно будет переопределить некоторые правила, такие как .ms-WPHeader.ms-WPBody (для заголовка и тела веб-части), чтобы применить ваши стили.

Лучший способ узнать, какие стили влияют на ваш код, - это использовать Firebug в Firefox. Как только вы точно поймете, почему ваш код не работает (через Firefox), вы, скорее всего, исправите свою страницу во всех браузерах одновременно (кроме мелких вещей). Сначала не беспокойтесь о кросс-браузерной совместимости, просто позаботьтесь о понимании правил, которые приходят из core.css.

Хотя это правда, что! Важные хаки могут заставить ваш код работать быстрее, ваш CSS-лист станет неуправляемым в кратчайшие сроки, если вы пойдете по этому пути.

РЕДАКТИРОВАТЬ Чтобы убедиться, что ваше правило переопределяет.ms-WPBody (например, для размера шрифта), вы можете быть более конкретным, чем SharePoint. То есть, у вас есть контент внутри веб-части:

<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, и поэтому ваша таблица стилей победит.

Что касается вашего пограничного вопроса, очень трудно понять, какое правило не работает, не увидев живой пример или код.

Тем не менее, вы можете попробовать с этими правилами и посмотреть, если они делают что-нибудь для вас. Используйте! Важные взломы, если вам нужно выяснить, какое правило является проблемой. Переопределите его правильно и удалите! Важный: это предполагает, что вы не хотите, чтобы какая-либо граница...

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

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

td.ms-PostTitle
{
    border: none !important;
}
Источник

Sharepoint - это программное обеспечение CMS, которое динамически генерирует свой код для страниц и аналогичным образом присваивает тегам класс CSS. И эти классы имеют некоторые свойства, определенные в таблице стилей. Чтобы переопределить этот стиль, используйте ключевое слово! Important в своей таблице стилей. например

.class{свойство: значение! важное; }

надеюсь, это поможет вам, даже если я никогда не работал с Sharepoint.

Источник
Другие вопросы по тегам