【问题标题】:HTML table works on all browsers except Internet ExplorerHTML 表格适用于除 Internet Explorer 之外的所有浏览器
【发布时间】:2014-04-13 05:21:00
【问题描述】:

我正在制作一个网站,我决定启动 Internet Explorer 以检查一切是否正常。令我惊讶的是,这一切都差不多。话虽如此,我的桌子看起来一点也不正确。这是表格的 HTML:

<div id="stats">
    <center>
    <table style="width:100%;">



                    <tr>
            <td id="name">Health:</td>
            <td class="border" id="color"><font color="#0451ff">380</font><font color="#e81123">(+75)</font></td>
            <td id="name">Health per 5:</td>
            <td id="color"><font color="#7fba00">4.85</font><font color="#e81123">(+0.5)</font></td>
        </tr>
        <tr>
            <td id="name">Mana:</td>
            <td class="border" id="color"><font color="#0451ff">250</font><font color="#7fba00">(+50)</font></td>
            <td id="name">Mana per 5:</td>
            <td id="color"><font color="#7fba00">7.1</font><font color="#7fba00">(+0.75)</font></td>
        </tr>
        <tr>
            <td id="name">Attack Damage:</td>
            <td class="border" id="color"><font color="#e81123">47</font><font color="#7fba00">(+3.2)</font></td>
            <td id="name">Attack Speed:</td>
            <td id="color"><font color="#e81123">0.604</font><font color="#7fba00">(+1.68)</font></td>
        </tr>
        <tr>
            <td id="name">Armor:</td>
            <td class="border" id="color"><font color="#e81123">15.5</font><font color="#7fba00">(+4)</font></td>
            <td id="name">Magic Resistance:</td>
            <td id="color"><font color="#0451ff">30</font><font color="#0451ff">(+0)</font></td>
        </tr>
        <tr>
            <td id="name">Movement Speed:</td>
            <td class="border" id="color"><font color="#e81123">335</font></td>
            <td id="name">Range:</td>
            <td id="color"><font color="#0451ff">550</font></td>
        </tr>

                </table>
    </center>
</div>

统计的CSS如下:

#stats {
    width:480px;
    height:173px;
    background:#09090A;
    margin-left:auto;
    margin-right:auto;
    border:1px solid black;
    padding:3px;
    padding-bottom:5px;
}
#stats table tr #name {
    width:35%;
    height:20px;

    text-align:center;
    padding-left:4px;
}
#stats table tr #color {
color:#e97900;
padding-left:2px;
padding-right:2px;
}
#stats table tr .border {
border-right:1px solid black;
}
#stats table tr td {
    width:13%;
    text-align:center;
    line-height:245%;
    font-size:14px;
    background-color:#1a1a1a;
}
#stats table tr {
        border-bottom:1px solid black;  
}
#stats table tr:last-child {
        border-bottom:0;    
}

在 Chrome、Safari 和 Firefox 中,表格如下所示:

这是我想要的;一条线上的所有东西都很好,整洁。但在 Internet Explorer 上,所有表格都如下所示:

有没有办法强制表格在 Internet Explorer 中正确格式化?

【问题讨论】:

  • @null 我在 IE 10 上对其进行了测试。我还在帖子中添加了更多 CSS。我忘记了表格样式
  • 嗯;我注意到您的 IE 屏幕截图具有使用 4 位数的攻击速度的括号值。如果它变得足够宽以扩展到两行,那可能会导致问题。

标签: html css internet-explorer


【解决方案1】:

使用您更新的 css,我能够复制,这解决了问题

#stats table tr td {
    width:13%;
    text-align:center;
    line-height:245%;
    font-size:14px;
    background-color:#1a1a1a;
    white-space:nowrap;
}

在你的 CSS 中?

【讨论】:

  • 哦,做到了。我忘记了空白。谢谢!当它允许我时会接受答案
猜你喜欢
  • 2013-11-21
  • 2012-01-09
  • 1970-01-01
  • 2012-12-15
  • 1970-01-01
  • 2011-12-03
  • 2013-02-23
  • 1970-01-01
  • 2011-08-27
相关资源
最近更新 更多