简体   繁体   English

IE7中的额外空间,其中一个div内有一个表

[英]Extra space in IE7 with a table inside a div

I have tried all of the solutions that might possibly work from around the net and haven't been able to figure this one out. 我已经尝试了所有可能在网络上可行的解决方案,但还没有弄清楚这一点。

Here is a page that demonstrates the problem: 这是演示问题的页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title Goes Here</title>
</head>

<body>
    <style>
        .centered_text {
            text-align:center;
        }
        .datagrid table { 
            width: 100%; 
            border-spacing: 0px;
        } 
        .datagrid {
            background: #FFFEE1; 
            border: thick solid #A31B2B;
        }
        .datagrid table td, .datagrid table th { 
            padding: 3px; 
        }
        .datagrid table tbody tr td { 
            border: thick solid #A31B2B;
        }
    </style>

    <div class="centered_text datagrid">
        <table>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

When I look at this in Chrome or IE10, it looks like I want it to...no space between the div border and the table border. 当我在Chrome或IE10中查看此内容时,似乎希望...在div边框和表格边框之间没有空格。 But, if I change the IE Document mode to IE7, a space shows up all the way around the table. 但是,如果我将IE文档模式更改为IE7,则表格周围始终会显示一个空格。

We still have to support IE7. 我们仍然必须支持IE7。 How do I make this space go away? 我如何使这个空间消失?

Also you can use: 您也可以使用:

<div class="centered_text datagrid">
            <table cellpadding="0" cellspacing="0">
            </table>
    <div>

Should be: 应该:

border-collapse:collapse;
border-spacing:0;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM