Question

我为我们城市的网站制作了一个简单的页面。 Firefox和Chrome很好...... IE将它分解成碎片。我已经在W3School tryit编辑器中尝试了我的代码，它在那里很好用。页面地址是： http://www.ci.douglasville.ga.us/index.aspx?NID=509

这是令人讨厌的代码：

<table cellpadding="4" cellspacing="1" style="text-align: justify; width: 100%; " align="left">
<tbody>
    <tr>
        <td style="text-align: left; vertical-align: top; width: 350px; ">
        <div style="text-align: center;"><span style="line-height: 17px; text-align: -webkit-auto; background-color: rgb(255, 255, 255); "></span></div>
        <span style="line-height: 17px; background-color: rgb(255, 255, 255); "><b style="LINE-HEIGHT: 17px; BACKGROUND-COLOR: rgb(255,255,255)">ADULT KARATE
        FOR ALL AGES &amp; SIZES!</b><br style="LINE-HEIGHT: 17px; BACKGROUND-COLOR: rgb(255,255,255)">
        <br>
        This is the
        chance you&rsquo;ve been waiting for to get healthy and more active!</span><br style="LINE-HEIGHT: 17px; BACKGROUND-COLOR: rgb(255,255,255)">
        <br style="LINE-HEIGHT: 17px; BACKGROUND-COLOR: rgb(255,255,255)">
        <span style="line-height: 17px; background-color: rgb(255, 255, 255); ">The McClure Style
        of TaeKwonDo specializes in safe, affordable, quality training for all adults,
        regardless of age, experience, or fitness level. All are welcome!</span><br style="LINE-HEIGHT: 17px; BACKGROUND-COLOR: rgb(255,255,255)">
        <br style="LINE-HEIGHT: 17px; BACKGROUND-COLOR: rgb(255,255,255)">
        <span style="line-height: 17px; background-color: rgb(255, 255, 255); ">Our Black-Belt
        Instructors tailor all classes to meet your specific needs and skill
        level:</span><span style="line-height: 17px; background-color: rgb(255, 255, 255); "> </span><span style="background-color: rgb(255, 255, 255); text-align: -webkit-auto; line-height: 17px; ">
        </span></td>
        <td style="border-top-style: solid; border-top-width: thin; border-top-color: rgb(44, 75, 129); border-right-style: solid; border-right-width: thin; border-right-color: rgb(44, 75, 129); border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: rgb(44, 75, 129); border-left-style: solid; border-left-width: thin; border-left-color: rgb(44, 75, 129); background-color: rgb(229, 225, 226); width: 205px; text-align: left; vertical-align: top; ">
        <div style="text-align: left;"><span style="font-weight: bold; line-height: 17px; color: rgb(128, 104, 39); ">Contact</span></div>
        <span style="line-height: 17px; background-color: rgb(229, 225, 226); ">
        <span style="line-height: 17px; background-color: rgb(229, 225, 226); ">Tommy Nicholson,
        Instructor<br>
        <div>Ph:
        770-942-0018<br>
        <br>
        Denver Thompson, Instructor<br>
        770-595-1245</div>
        </span>
        <div class=""><br>
        <b>Hunter Park Community Center</b></div>
        </span><span style="line-height: 17px; text-align: left; ">
        8830 Gurley Road<br>
        Douglasville, Ga 30134<br>
        To sign up call 770-920-3007<br>
        </span></td>
    </tr>
    <tr>
        <td style="text-align: left; vertical-align: top; " colspan="2">
        <ul>
            <li><span style="line-height: 17px; ">Self-Defense Training</span></li>
            <li><span style="line-height: 17px; ">Fitness, Flexibility, Coordination, &amp; Balance Training</span></li>
            <li><span style="line-height: 17px; ">Rank Advancements at Your Own Pace</span></li>
            <li><span style="line-height: 17px; ">Advanced Training in TaeKwonDo and Hapkido for Experienced Skill Levels</span></li>
        </ul>
        </td>
    </tr>
    <tr>
        <td style="text-align: left; vertical-align: top; " colspan="2">&nbsp;
        <table width="100%" cellpadding="2" cellspacing="1">
            <tbody>
                <tr>
                    <td style="text-align: left;width: 280px; vertical-align: top; "><b>Adult Classes</b><br>
                    Registration: Every Tuesday (ongoing)<br>
                    <br>
                    Classes: Tuesdays, 7:30-8:30pm<br>
                    Cost: $50.00 per month<br>
                    <br>
                    </td>
                    <td style="width: 280px; text-align: left; vertical-align: top; "><b style="text-align: left; "></b><b>Karate for Kids</b><br>
                    Registration: Winter Classes begin Tuesday, <span class="Apple-tab-span" style="white-space: pre; ">            </span>November 15, 2011<br>
                    Classes: Tuesdays, 6:30-7:30 pm<br>
                    Cost: $60.00 per month for 8 week course<span style="text-align: -webkit-auto; "></span></td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
</tbody>

Answer 1

您使用的是IE7 doctype，因此您的页面会显示IE7的渲染引擎。为什么不使用IE9 doctype，例如：

<!DOCTYPE html>

编辑：当然，您希望它能够在IE7中正确显示，因此您仍然希望解决此问题。在＆＃34;空手道儿童＆＃34;单元格，您的跨度为white-space: pre;。这导致了你的问题。最简单的解决方法是在它之前插入<br/>。

话虽这么说，您的网页使用了一些与网页设计最佳做法相悖的布局技术。您正在使用表来控制布局和表示，至少可以说是不赞成的，但具有讽刺意味的是，您没有使用表格来显示页面上的表格数据。我还特别劝阻将页脚城市徽标图片分成两半。

Answer 2

由于W3 Validator发现了几个问题，你应该认为自己很幸运只有IE没有正确显示页面。验证器还提供了有关如何解决问题的信息。

为什么IE会破坏我的页面？

2 个答案: