Размер Div не работает во всех браузерах

Question

У меня есть простой ролловер изображения CSS.Я проверил код, и он работает точно так же, как и в Firefox и Chrome, однако было отмечено, что он не работает в Safari, Opera или любых браузерах Mac.У меня есть очень похожий ролловер вниз по странице, который отлично работает.Я несколько раз просматривал код в поисках опечатки или чего-либо еще, чтобы объяснить, что происходит, но я в растерянности.

Фактический сайт можно найти здесь: (очень в разработке)1003 *

http://www.printyourpowerpoint.com/dev2/index.php

Вот HTML:

    <div id='header'>
        <div class='header-first' id='header-logo'>
            <a href='index.php'><img src='images/trans.gif' alt='Print Your PowerPoint Home'/></a>
        </div>
        <div class='header-item' id='header-why'>
            <a href='why-us.php'><img src='images/trans.gif' alt='Why Print Your PowerPoint?'/></a>
        </div>
        <div class='header-item' id='header-products'>
            <a href='products.php'>
                <img src='images/trans.gif' alt='Print Your PowerPoint Products'/>
            </a>
        </div>
        <div class='header-item' id='header-about'>
            <a href='about.php'>
                <img src='images/trans.gif' alt='About Print Your PowerPoint?'/>
            </a>
        </div>
        <div class='header-item' id='header-cart'>
            <a href='cart.php'>
                <img src='images/trans.gif' alt='View Cart'/>
            </a>
        </div>
        <div class='header-right'>
            <div class='header-item' id='header-create'>
                <a href='cart.php'>
                    <img src='images/trans.gif' alt='Create Account'/>
                </a>
            </div>
            <div class='header-item' id='header-account'>
                <a href='cart.php'>
                    <img src='images/trans.gif' alt='My Account'/>
                </a>
            </div>
        </div>
    </div>

Вот CSS:

div {
float: left;
}
#header {
width: 900px;
height: 85px;
}
.header-first {
    background: top center no-repeat;
    height: 70px;
    margin: 7px 15px 7px 56px;
    }
.header-item {
    background: top center no-repeat;
    height: 30px;
    width: 101px;
    margin: 45px 15px 7px 15px;
    }
.header-item2 {
    margin: 0px 20px;
    width: 136px;
    height: 132px;
    background: top center no-repeat;
    }
.header-right {
    float: right;
    margin-top: 46px;
    height: 30px;
    }
.header-item img {
    height: 30px;
    width: 101px;
    }
.header-first img {
    height: 70px;
    }
.header-item:hover, .header-first:hover {
    background: bottom center no-repeat;
    }
#header .header-right .header-item {
    margin:0px;
    }

#header-logo {
    background-image: url('images/print-your-powerpoint-logo-top.png');
    }
    #header-logo, #header-logo img {
        width: 82px;
        }

#header-why {
    background-image: url('images/header-why-us.png');
    }
    #header-why, #header-why img {
        width: 101px;
        }

#header-products {
    background-image: url('images/header-products.png');
    }
    #header-products, #header-products img {
        width: 111px;
        }

#header-about {
    background-image: url('images/header-about.png');
    }
    #header-about, #header-about img {
        width: 89px;
        }

#header-cart {
    background-image: url('images/header-cart.png');
    }
    #header-cart, #header-cart img {
        width: 62px;
        }

#header-create {
    background-image: url('images/header-create.png');
    }
    #header-create, #header-create img {
        width: 107px;
        }

#header-account {
    background-image: url('images/header-my-account.png');
    border-left: 1px solid #C2B59B;
    }
    #header-account, #header-account img {
        width: 107px;
        }

Answer 1

Начнем с того, что выбранный вами тип документа XHTML может отбросить браузеры Mac ... просто догадка, но вы, возможно, захотите исследовать это отдельно (а затем соответствующим образом скорректировать свой HTML).

Изображения заголовка не отображаются в Chrome на Mac, поскольку фактический размер изображения в конечном итоге составляет 4 × 4 пикселя.Изображения находятся в теге A в DIV, и тег A сам по себе не действует как контейнер, что объясняет, почему изображения не будут отображаться.

Однако, если вы не делаете некоторыеЗагрузка изображений в JavaScript ПОСЛЕ или КОГДА страница загружается, все, что в данный момент отображается, это transxif размером 4px x 4px (даже когда я делаю тег A блок-контейнером размером 100px x 100px).

Просмотр JavaScriptКонсоль и Ресурсы, которые загружаются, ни одно из ваших изображений заголовков фактически не загружается.Вы можете проверить это, посмотрев эту информацию на вкладке «Ресурсы или сеть» консоли.

И когда я проверял ваш CSS-файл, не было никакой ссылки на какое-либо из этих изображений, которые вы показывали мне в ЭТОМ ЧТОЭТО ДОЛЖНО СМОТРЕТЬ, как скриншот.Я дважды проверю страницу из дома, когда нахожусь в окне Windows, но, насколько я могу судить отсюда, изображения просто недоступны.