Проблема с исходным положением CSS3 только с Safari

Следующий код хорошо проявляется в IE9, FireFox, Chrome, но не в Safari:

.search-choice
{
  position: relative;
  background-clip : padding-box;
  background-image: url('../Design/icon_chosen_close.gif');
  background-repeat: no-repeat;
  background-position: top 6px right 6px;
}

<ul class="chzn-choices">
    <li class="search-choice" id="selLVB_chzn_c_0">
        <span>multi1</span><a href=# class="search-choice-close" rel="0"></a>
    </li>
</ul>

Safari, похоже, не учитывает фоновое положение. Я попробовал несколько вариантов (например, background-position-x: right 6px), но ничего не работает. Я просто не могу компенсировать фоновое изображение в Safari, начиная с верхнего правого угла.

Любые идеи? Большое спасибо за ваше время!

Ответ 1

Узнал, что Safari отмечает следующую строку как недопустимую, и фоновое изображение не будет отображаться:

background-position: top 15px right 0px;

Но когда я печатаю только:

background-position: top right;

Safari генерирует следующее:

background-position-x: 100%;
background-position-y: 0%;

Нашел то, что Firefox полностью игнорирует:

background-position-x: 100%;
background-position-y: 0%;

Итак, я сделал это с помощью:

background: url(../images/image.png) no-repeat;
background-position: top 15px right 0px;
background-position-x: 120%;
background-position-y: 0%;

Пока Safari игнорирует вторую строку, Firefox игнорирует последние две строки.

Эта настройка, похоже, работает и в старых Internet Explorers. Протестировано в IE8.

Ответ 2

В реализации Safari есть ошибка, связанная с длинным синтаксисом фонового положения: https://bugs.webkit.org/show_bug.cgi?id=37514

Мое исправление для этого заключалось в использовании background-position: top right; в сочетании с правильным дополнением и background-origin: content-box;

В некоторых сценариях также может быть полезно использовать псевдоэлемент вместо фонового изображения и просто поместить его так же, как и фон.

Ответ 3

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

background:url("../images/") no-repeat Xpx Ypx;

Где X обозначает ширину слева и высоту Y сверху.

Ответ 4

У меня была аналогичная проблема при предоставлении <a> -tag фонового изображения. Чтобы дать ему display: inline-block;, я решил проблему для меня.

Ответ 5

Лучший способ:

background-size: auto;