css 问题 w/ie 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

ie9不理解你的html5元素:article, footer, section, figure；副手我只是继续添加 html5.js 然后在你的 css 中打开它们:

文章、图表、章节、页脚{display:block}

我认为这应该可以解决您所说的问题