css - CSS3 background-position issue with Safari only -
the following code renders in ie9, firefox, chrome, not in 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 doesn't seem take account background-position. have tried number of variants (like background-position-x: right 6px), nothing seems work. can't offset background image in safari starting top right corner.
any ideas? lot time!
found out safari marks following line invalid , background image won't displayed:
background-position: top 15px right 0px;
but when type only:
background-position: top right;
safari generates following itself:
background-position-x: 100%; background-position-y: 0%;
found out firefox ignores:
background-position-x: 100%; background-position-y: 0%;
so did with:
background: url(../images/image.png) no-repeat; background-position: top 15px right 0px; background-position-x: 120%; background-position-y: 0%;
whilst safari ignores second line, firefox ignores last 2 lines.
this tweak seems work in older internet explorers, too. tested in ie8.
Comments
Post a Comment