Скругленные углы на изображениях в FireFox 3.6.15+ все еще не работают? - PullRequest
Новая
       13

Скругленные углы на изображениях в FireFox 3.6.15+ все еще не работают?

2 голосов
/ 14 марта 2011

Велико связанных людей в Интернете,
Из-за моего скругления углов у меня проблема с Firefox.Я думал, что доисторическая проблема была решена до сих пор на моем Firefox 3.6.15, но его стиль не заходит за угол на изображениях.Прекрасно работает в бета-версии IE 9, Safari и Chrome, однако на моем 64-битном Win 7 углы выглядят ровно идеально прямоугольными без каких-либо признаков округления в FF. 

img#thmb { /* thumbnails */
    width:  200px;
    height: 200px;

    border-radius:         8px;
    -moz-border-radius:    8px;
    -webkit-border-radius: 8px;
}

Что я делаю неправильно, вызывая округлениеуглы, чтобы работать на всех моих тестирующих браузерах правильно, кроме моего единственного любимого браузера .... FireFox.Спасибо за подсказки и понимание кода исправления.

Ответы [ 3 ]

3 голосов
/ 14 марта 2011

Благодаря тому, что теги <img> реализованы в Gecko Engine, Firefox в настоящее время не поддерживает border-radius для тегов <img> (Начиная с ветки 3.x, Gecko 1.9.x).

Это известная ошибка.

Однако в Firefox 4 (Gecko 2) закругленные углы теперь обрезают содержимое и изображения (если overflow : visible не задано). [источник]

Эта ошибка требовала переписывания основного движка, что и делает команда Mozilla с Firefox 4.

1 голос
/ 14 марта 2011

Чтобы получить округленные границы для изображений в старом Firefox, вам нужно добавить некоторые отступы к <img> и цвет фона.Это может быть ужасно в зависимости от того, каков ваш дизайн, и они будут просто расширяться вокруг границ, оборачивающих изображение, но в простом CSS это самый простой способ.

1 голос
/ 14 марта 2011

Для всех браузеров совместимость вы можете применить Jquery для этого

  1. Скачать jquery https://github.com/malsup/corner/raw/master/jquery.corner.js?v2.09
  2. Применить jquery.js и corner.js в ваш HTML-код
  3. Вызов функции угла в $ (document) .ready () function

Код выглядит следующим образом 

<html>
<head>
<script type="text/javascript" src="/jquery.1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<style type="text/css">
round_corner { background: #666666; border:1px solid #000000; width:200px; height:150px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $(.round_corner).corner()
});
</script>
</head>
<body>
<div id="my_div" class="round_corner"></div>
</body>
</html>

Для демонстрации вы можете посетить http://www.malsup.com/jquery/corner/

...