jscrollpane внутри colorbox - нижняя часть iframe обрезана?

Question

Я использую colorbox, чтобы открыть iframe, внутри которого я вызываю jscrollpane, чтобы разрешить прокрутку. Это работает, но в некоторых случаях (не во всех, не видно шаблона) более низкие 100 или около того обрезаются. Кроме того, я не могу заставить полосы прокрутки появляться на ipad.

Есть идеи? http://www.ainonline.com/newsmakers/2011

Нажмите на ссылки на временной шкале, чтобы увидеть, что я имею в виду.

Answer 1

У меня была похожая проблема ... Это было мое решение

$(".gallery").colorbox({
            iframe:true,
            fastIframe:false,
            width:"630px",
            height:"555px",
            scrolling: false,
            rel:'gallery', 
            slideshow:false, 
            onComplete:function(){ $(".cboxIframe").contents().find("body").css("margin","0px");
                //$("#banner").insertBefore("#cboxLoadedContent")
            }
        });

Answer 2

На каждой странице, включенной через iframe, вы должны четко указать поля тела следующим образом:

body {
  margin: 0px;
}

Если вы этого не сделаете, браузер будет использовать настройки по умолчанию, а это означает, что результаты в разных браузерах будут отличаться.

Вы должны проверить: normalize.css

Это таблица стилей, предназначенная для сброса всех браузеров к одним и тем же стандартным правилам стиля.

Answer 3

Хорошо, шаблон, который я вижу, состоит в том, что последний блок текста иногда имеет разметку абзаца вокруг, а иногда нет, что совпадает с тем, отображается ли текст полностью ( с <p>...</p>) или часть текста остается скрытой ( без <p>...</p>).

Не будет отображаться последний бит текста:

<div class="articleview scrollpane" style="width:650px">
    <h1>Former Platinum Jet Pilot Gets Six Months Prison Time</h1>
    <div class="pubdate" style="color:#666; margin:10px 0; font-style:italic">August 23, 2011 - 3:20 PM</div>
    Blah blah blah [...] blah.
</div>

Покажет последний бит текста:

<div class="articleview scrollpane" style="width:650px">
    <h1>Former Platinum Jet Pilot Gets Six Months Prison Time</h1>
    <div class="pubdate" style="color:#666; margin:10px 0; font-style:italic">August 23, 2011 - 3:20 PM</div>
    <p>Blah blah blah [...] blah.</p>
</div>

Дайте мне знать, если это решит эту проблему.

Что касается другой части вопроса (которая действительно должна быть задана в отдельном вопросе), iPad не использует полосы прокрутки на веб-сайтах. Он использует жесты. Не беспокойтесь об этом - сайт отлично работает.

Answer 4

Здесь страницы, которые вы загружаете, имеют основание 8px на теле (таблица стилей агента пользователя), в результате чего страницы немного смещены вправо и вниз. Тогда, похоже, вам не хватает частей страниц.

Положим маржу: 0px; на элементе тела, как:

body {
    margin: 0px;
}