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

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

3 голосов
/ 24 ноября 2010

Я пытаюсь добавить контент в веб-часть редактора контента 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-файлом, сохраненным в библиотеке сайта, и добавить код в файл, загружаемый в веб-часть.т редактировать файл, мой код проходит чисто и нетронутым: -)

Ответы [ 2 ]

6 голосов
/ 24 ноября 2010

Может быть немного сложно заставить ваш 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-лист станет непригодным для использования в кратчайшие сроки, если вы пойдете по этому пути.

EDIT Чтобы убедиться, что ваше правило переопределяет .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;
}
0 голосов
/ 24 ноября 2010

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

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

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

...