Question

我之前遇到过这个问题，但是无法记住如何解决这个问题 - 互联网资源管理器在图像周围增加了额外的空白区域 - 我认为这是因为这些图像是相互关联的 - 这就是抛弃整个视觉效果

我试过了
1. 缩小它以删除html中的所有空格
2. 将html头改为过渡

任何想法？

我不记得我之前是怎么做的 - 我试着改变桌子的边缘但是没有运气

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en"
    lang="en"
    dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
    background-color:#999;
    text-align:center;
    padding:0px;
    margin:0px;
}

#header{
    height:87px;
    width:960px;
    background:url('<?=base_url()?>imgs/templates/dealerdotcom/site-header-interior.jpg');


}

#wrapper{
    width:960px;
    margin:auto;
    text-align:left;
    background-color:#fff;
}

#footer{
    background: url("<?=base_url()?>imgs/templates/dealerdotcom/bg-header.png") repeat-x scroll 0 0 #080808;
    width:960px;
    min-height:75px;
}

#main{
    height:600px;
}
.blurb{
    padding-top:25px;   
}


.email_class {
    border:1px solid #CCCCCC;
    width:200px;
    margin-bottom:20px;
    height:150px;
    /*float:left;*/
    text-align:center;

}

.login_button{
    padding-top:50px;
    margin:auto;
    text-align:center;
}

.options{
    text-align:center;
    width:500px;
    margin:auto;

}

.connect_box{
    width:900px;
    margin-left:auto;
    margin-right:auto;

    border:1px solid #CCCCCC;

    min-height:400px;
    padding:15px;
    font-size:11px;
    text-align: center;
}
table{
    margin: 0px;
    *margin: 0 0 0 -2;
}
</style>
 <link href="<?=base_url()?>/styles/gallerycss-cssbutton.css" type="text/css" rel="stylesheet" />
<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script>
</head>

<body>

<div id="wrapper">
    <div id="header">
        <img style="margin:15px;" src="<?=base_url()?>imgs/templates/dealerdotcom/ddc-logo.png"/>
    </div>
    <div id="main"> 
        <table style="margin:0px;" id="Table_01" width="957" height="598" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="6">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_01.png" width="957" height="227" alt=""/>
            </td>
        </tr>
        <tr>
            <td rowspan="3">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_02.png" width="228" height="371" alt=""/>
            </td>
            <td colspan="5">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_03.png" width="729" height="29" alt=""/>
            </td>
        </tr>
        <tr>
            <td rowspan="2">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_04.png" width="33" height="342" alt=""/>
            </td><td width="239" height="236">
            <? if($setting['use_fb']){ ?>
                <a href="<?= $loginUrl; ?>"><img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_05.png" width="237" height="234" alt=""/></a>
            <?}?>
            </td>
            <td rowspan="2">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_06.png" width="80" height="342" alt=""/>
            </td>
            <td width="239" height="236"><? if($setting['use_twitter']){?><a href="<?=base_url()?>social/pre_network_select/twitter">
                    <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_07.png" width="228" height="234" alt=""/>
            </a>
            </td>
            <?}?>           
            <td rowspan="2">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_08.png" width="147" height="342" alt=""/>
            </td>
        </tr>
        <tr>
            <td>
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_09.png" width="239" height="106" alt=""/>
            </td>
            <td>
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_10.png" width="230" height="106" alt=""/>
            </td>
        </tr>
        </table>

    </body>
    </html>

你可以在女装中看到这个问题 -

enter image description here

Answer 1

添加它应该排除它：

img {
    vertical-align: top;
}

More information here.

Answer 2

已经有一段时间了，但我曾经将图片标记的border属性设置为0来纠正类似的问题。（有时我会在图像周围出现彩色边框 - 仅限IE浏览器！）

<img src='myimage.gif' border='0' />

IE中切片html页面中链接图像周围的空白区域

2 个答案: