css проблемы с т. е. 8 и ниже

Question

Я собрал этот маленький кусочек, но у меня проблемы с визуализацией ниже IE9.

Я просмотрел кучу уроков и даже попробовал версию техники "html shiv", но безрезультатно.

Я не уверен, в чем проблема. Я перекрестно протестировал его, и он работает практически во всех браузерах, кроме IE8 и ниже. Мне просто любопытно, придется ли мне переделывать всю таблицу стилей для IE8 и меньше, или я просто что-то упустил.

В IE8 / IE7 / IE6 состояния наведения кнопок работают, но все границы исчезают.

http://www.brodieyazaki.com/matt_tiles

- это живая рабочая версия.

Вот HTML (я бы включил CSS, но он длинный, но вы можете просмотреть его в инструментах разработчика, извините за неудобства).

    <section id="tile">
    <button id="toggle_button"></button>
    <section id="tile_content">
        <figure id="tile_content_figure" class="clearfix">
            <img src="imgs/tile_pic.png">
            <h1>
                &#8220;Siri's Default Settings Leave
                Your iPhone 4S Exposed&#8221;
            </h1>
        </figure>

        <div id="tile_content_link">
            <p id="from_in">
                From <a href="#">nytimes.com</a> in <a href="#">arab spring</a> 
            </p>
        </div>

        <div id="tile_content_comment" class="clearfix">
            <img src="imgs/user_img.png">
            <p>
                "This is the basic version of the tile"
            </p>
        </div>
    </section>

    <footer id="tile_foot">
        <div id="foot_wrap" class="clearfix">
            <figure class="like_view">
                <img src="imgs/like.png">
                <span>10</span>
            </figure>
            <figure class="like_view">
                <img src="imgs/view.png">
                <span>100</span>
            </figure>
            <article id="social" class="clearfix">
                <button id="facebook"></button>
                <button id="tumblr"></button>
                <span>share</span>
            </article>
        </div>
    </footer>
</section>

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

пожалуйста, помогите, и спасибо

Answer 1

статья, рисунок, раздел, нижний колонтитул {display: block}

Я думаю, это должно исправить то, о чем вы говорите

Answer 2

У вас много дубликатов id.id должны быть уникальными для каждого элемента, иначе браузер может игнорировать последующие экземпляры id.Вы также должны объявить кодировку документа, среди прочих ошибок проверки HTML ...

http://validator.w3.org

Ваш сайт с большей вероятностью будет работать должным образом во всех браузерах, если его HTML-кодполностью соответствует требованиям.