Неправильное отображение в Safari и IE. Как исправить?

[Johnney]

http://tellmeof.cc.ua/Map/map.html

 

1. Safari 7 (в более старых не проверял) не скругляет углы у iframe.
Вроде бы поддерживает border-radius и overflow:hidden, но тут почему-то не работает.
2. IE7 и IE8 не скругляют углы у iframe.
Благодаря pie.htc, скругляются углы у контейнера .s-circle1, но у самого iframe - нет. Overflow:hidden контейнера тоже не обрезает карту, как ожидалось.
3. IE7 и IE8 не отрабатывают ховер.
4. IE9+ как-то странно отрабатывают ховер.
Когда курсор переходит на саму карту, ховер-состояние перестаёт действовать. Хотя в нормальных браузерах действует.

Прошу помощи.

[Даниил Виттманн]

оverflow:hidden

 у контейнера +

z-index: 0

у iFrame`a

или используйте google map api http://codepen.io/WittmannD/pen/kCtzp

Edited August 12, 2014 by Даниил Виттманн

[Johnney]

оverflow:hidden

 у контейнера +

z-index: 0

у iFrame`a

или используйте google map api http://codepen.io/WittmannD/pen/kCtzp

Overflow:hidden у контейнера есть. Не помогает.

Поставил z-index:0 на iframe. Не работает. И вообще, смысл этого не понятен.

[Great Rash]

Пробовали сделать так?

<div style=”border-radius: 150px; width: 300px; height: 300px; overflow: hidden;”>  <iframe></iframe></div>

Никакой pie.htc вам не поможет. В ИЕ7 и в ИЕ8 вам придётся отказаться от круглых углов.

[Johnney]

Пробовали сделать так?

<div style=”border-radius: 150px; width: 300px; height: 300px; overflow: hidden;”>  <iframe></iframe></div>

Никакой pie.htc вам не поможет. В ИЕ7 и в ИЕ8 вам придётся отказаться от круглых углов.

 

Вы имеете ввиду задать инлайновые стили? Просто, почти так у меня и задано в CSS. Только border-radius в процентах.

[Sergik+]

Жуть какая IE7 и IE8, зачем ? Хотят скругленные уголки пускай ставят нормальный браузер.

Может еще под нокию 3310 сверстать ? Не надо, забудьте.

[Johnney]

Жуть какая IE7 и IE8, зачем ? Хотят скругленные уголки пускай ставят нормальный браузер.

Может еще под нокию 3310 сверстать ? Не надо, забудьте.

Я бы с удовольствием Но такая задача.

[Great Rash]

Вы имеете ввиду задать инлайновые стили? Просто, почти так у меня и задано в CSS. Только border-radius в процентах.

Я имею в виду. что надо задать стили не для фрейма, а для его родителя. Т.е. обернуть фрейм в <div> и ему уже задать радиус.

[Sergik+]

 

Жуть какая IE7 и IE8, зачем ? Хотят скругленные уголки пускай ставят нормальный браузер.

Может еще под нокию 3310 сверстать ? Не надо, забудьте.

Я бы с удовольствием Но такая задача.

 

Есть библиотеки на JS специальные по поддержке новых свойств в старых браузерах, это самый простой способ.

[Johnney]

 

Вы имеете ввиду задать инлайновые стили? Просто, почти так у меня и задано в CSS. Только border-radius в процентах.

Я имею в виду. что надо задать стили не для фрейма, а для его родителя. Т.е. обернуть фрейм в <div> и ему уже задать радиус.

 

Так и сделано. Работает, но не везде. Опера 12.16, например, не хочет скруглять карту. Поэтому я повесил border-radius: 50% ещё и на сам iframe.

[Great Rash]

В таком случае у вас остаётся несколько выходов:

1) делать картинками (в таком случае часть карты будет некликабельна)

2) забить на старые браузеры (пусть там будет квадратное)

3) обсудить с заказчиком и дизайнером возможность перерисовки макета

[Johnney]

В таком случае у вас остаётся несколько выходов:

1) делать картинками (в таком случае часть карты будет некликабельна)

2) забить на старые браузеры (пусть там будет квадратное)

3) обсудить с заказчиком и дизайнером возможность перерисовки макета

Мда, я тоже других вариантов не вижу.