Safari CSS Проблема / Фоновое изображение - PullRequest
Новая
       22

Safari CSS Проблема / Фоновое изображение

4 голосов
/ 26 января 2011

У меня полноэкранное фоновое изображение, которое сохраняет соотношение сторон и работает во всех браузерах, но не в Safari.Я хорошо разбираюсь в CSS, но на данный момент я не знаю точно, в чем проблема.Кажется, что Safari имеет проблему с удержанием вертикального центра и создает разрывы сверху и снизу: 

<div id="bg">
    <div style="display: table-cell">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="loading"><img src="images/home.jpg" /></td>
            </tr>
        </table>
    </div>
</div>

CSS: 

html,body,#bg,#bg table,#bg td {
    width:100%;
    height:100%;
    overflow:hidden;
    position: relative
    }

#bg div{
    position:absolute;
    width:200%;
    height:200%;
    top:-50%;
    left:-50%
    }

#bg td{
    vertical-align:middle;
    text-align:center
    }

#bg img{
    min-height:50%;
    min-width:50%;
    margin:0 auto;
    display: table
    }

Любой CSS cr хакиздесь

1 Ответ

0 голосов
/ 26 января 2011

Если вы хотите использовать фактическое изображение в качестве фона вместо фонового изображения в вашем CSS, решение JavaScript может лучше подойти для ваших нужд, поскольку оно не вводит постороннюю разметку в ваш дизайн.

Проверьте jQueryMaxImage: http://www.aaronvanderzwan.com/maximage/ и вот что я написал, jquery.FullScreenBG: https://github.com/huntedsnark/jquery.fullScreenBG

Если вы не хотите делать это с помощью скрипта, есть способ сделать это, используя CSS # плюс нестандартный CSS для совместимости: 

html {
    background: url(images/yourImage.jpg) no-repeat center center fixed;

    /* CSS3 */
    background-size: cover;

    /*other browser specific */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    /* non-standard for IE */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.yourImage.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourImage.jpg', sizingMethod='scale')"
}

Вы действительно не должны добавлять все виды табличной разметки ради фонового изображения.

...