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

＆LT; ie9不理解你的html5元素：文章，页脚，部分，图;我只是继续添加html5.js，然后在你的CSS中打开它们：

文章中，图中，部分，页脚{显示：块}

我认为应该解决你所说的问题

Answer 2

你有很多重复的id。 id每个元素必须是唯一的，否则浏览器可能会忽略id的后续实例。您还应声明文档编码，以及其他HTML验证错误......

http://validator.w3.org

当所有浏览器的HTML代码完全合规时，您的网站更有可能按预期工作。

css问题w / ie 8及以下

2 个答案: