2013-02-07 4 views
3

Мы работаем над новым сайтом и имеем проблему с полем «Присоединиться к разговору» только в Safari. Прекрасно работает в других браузерах. Фон только предположить, чтобы появиться на дне коробки, но в Safari, он показывает на всей коробке: положение сафари css не работает

старый сайт DEV здесь, и он отображает штраф на Safari и других браузеров. Я сделал проверку различий между домашней страницей и CSS, но не могу понять это: http://cool-quotes.org/future

#email_newsletter.home_content { 
    background:#fff url(img/addons/news_letter_container_bg.png) repeat-x left bottom; 
    overflow: hidden !important; 
    border:1px solid #B3B3B3; 
    /* */ 
} 
+1

У меня возникли проблемы с отображением вашего вопроса, выглядит так же для меня в Firefox, Chrome и Safari ... – apaul

+0

я редактировал этот вопрос, но после того, как Баунти не показывать мои изменения, я хочу, чтобы поместить изображение с фоновой позицией: правая 100px нижняя 0px; он работает в хроме, но не в сафари –

+0

Я задал новый вопрос здесь: http: //stackoverflow.com/questions/17908471/safari-position-css-not-working-second-time-ask-same-quastion –

ответ

1

По W3Schools вы можете предоставить значение в указанном ниже формате:

  • правый верхний/правый центральный/правый нижний: указать только одно ключевое слово
  • XPOS YPos: Единицы измерения могут быть пиксели (0px 0px) или любой другой CSS units
  • inherit: Указывает, что настройка свойства background-position должна быть унаследована от родительского элемента

Также я пробовал свои материалы лично, и я обнаружил, что он действительно не работает для Safari, но если это действительно необходимо для вас, и если вы можете сделать ниже упомянутый трюк, то ваш вопрос решается :-)

Работа Fiddle для вас

<!-- The CSS --> 
<style type="text/css"> 
div { 
background: url(https://www.google.co.in/images/srpr/logo4w.png) no-repeat scroll right bottom transparent; 
margin-right: 100px; 
} 
p { 
margin-right: -100px; 
} 
</style> 

<!-- The HTML --> 
<div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod adipiscing elementum. In turpis ipsum, adipiscing vitae magna vitae, consequat hendrerit justo. Aliquam non facilisis dui, tempus convallis tortor. Donec ultricies pharetra tortor, a tempor magna commodo nec. Donec id justo ornare, ullamcorper est ac, aliquet justo. Duis rutrum justo a laoreet volutpat. Phasellus molestie consequat risus at varius. Aenean imperdiet ornare odio, a aliquam leo pharetra id. Integer lectus felis, semper id sapien viverra, dignissim molestie massa. Mauris blandit eros eget lorem cursus, sed consectetur lectus tincidunt. Cras tristique vel orci eu cursus. Sed congue tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vehicula nec eros sit amet mollis. Nam ipsum arcu, pretium et tempus ac, scelerisque sed nulla. Sed dapibus in massa in consequat.</p> 
</div> 

Приветствиях & GOODLUCK!

+2

Страница W3Schools устарела. Лучше не использовать его. Официальная страница W3C [здесь] (http://dev.w3.org/csswg/css-backgrounds/#background-position). –

+1

Я согласен с @ mr-lister. W3CSchools известен тем, что имеет плохую информацию. Проверьте [это] (http://www.w3fools.com/). –

+1

@BrianRay Нет, это не так. Некоторые люди хотели бы, чтобы это было, но есть много сайтов типа учебников, которые так же плохи или хуже. Нет веской причины для выделения W3Schools как «плохого». –

1

От https://stackoverflow.com/questions/17908471/safari-position-css-not-working-second-time-ask-same-quastion

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

0

Попробуйте это!

#email_newsletter .home_content { 
    background: #ffffff url('img/addons/news_letter_container_bg.png') left bottom repeat-x; 
    width: 600px; 
    height: 400px; 
    float: left; 
    overflow: hidden !important; 
    border:1px solid #B3B3B3; 
    /* */ 
    } 
Смежные вопросы