Странное поведение CSS в Chrome для Facebook, такое как box

Question

Я испытываю это странное поведение в Chrome (я тестировал как версии Windows, так и Linux). Я также тестировал его на Firefox, но он работает правильно.

У меня есть отображение в Facebook, как показано на виджетах Wordpress. (Его использование официального плагина Facebook, хотя, если что-то не так с его выходом, я могу легко изменить его сам). В действительности то, что он делает, включает iFrame.

1. Странное белое заполнение появляется под логотипом Facebook в нижней части виджета. Странная вещь в том, что, когда я наводил над заголовком, который только меняет цвет, ящик внезапно автоматически настраивает высоту на правильную. Вы можете видеть это here, где виджет Facebook Like Box справа (3-й ящик сверху) имеет несколько белых дополнений. Наведите указатель мыши на «Как мы?» название, и он внезапно корректирует высоту до правильного.

2. Более серьезная проблема возникает, когда пользователь переходит на другую страницу и обратно на страницу. При открытии страницы введите другой адрес в адресной строке, например www.google.com. После загрузки просто нажмите кнопку «Назад» браузера Chrome. Вы вдруг увидите, что Facebook Like Box не отображается как раньше, но отображается в гораздо более мелкой коробке, и появляются уродливые полосы прокрутки.

В чем причина этого? Ее первый раз я столкнулся с этими странными проблемами, которые возникают на первый взгляд не связанные поведения (появляющаяся ссылку и нажав назад)

Answer 1

Насколько я могу видеть, в вашем servicebox поля (которое содержит как поле) у вас есть div с классом serviceheading, который имеет float: left;. Я думаю, это может вызвать проблемы, потому что у самого servicebox нет никаких свойств, чтобы содержать поплавки. Вы можете попытаться добавить решение clearfix к .servicebox или попробуйте добавить overflow: hidden; в качестве быстрого исправления. Это может решить вашу первую проблему.

Что касается второй проблемы. Я бы попробовал добавить некоторые свойства, чтобы проверить, помогают ли они.

• сделать .fb_iframe_widget ясный плавающий логотип на clear: left; Это сделает этот блок, чтобы всегда быть под логотипом.
• изготовить .fb_iframe_widget элемент блока display: block; (правый сейчас - это inline-block). Он автоматически даст ему ширину родительского элемента (303px)
• сделайте следующий селектор .fb_iframe_widget iframe и добавьте max-width: 100%; к нему. Эти стили гарантируют, что iframe не станет больше - так что кнопки прокрутки , вероятно, исчезнут.

Надеюсь, это поможет.

UPDATE

По какой-то причине, когда кнопка назад нажата <span> внутри .fb_iframe_widget получал набор высоты и ширины 0px.Следующее решает эту проблему, хотя его немного рубить, а высота и ширина должна была быть жестко:

.fb_iframe_widget iframe 
{ 
    height: 230px !important; 
    width: 300px !important;  
} 

.fb_iframe_widget span 
{ 
    height: 230px !important; 
    width: 300px !important;  
}