Question

我正在使用谷歌Chrome 3.0.196.2，我注意到由于某种原因，＃main div的背景稍微缩小了，即使它不应该。它在所有其他浏览器中都可以正常测试

任何人都知道为什么？

链接到网站：link text

甚至还有一个屏幕截图：link text 请注意，右侧的绿色被切断，以及没有排列的东西。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
    <STYLE type="text/css">
        #main {
            border: 10px solid black;
            height: 300px;
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
            padding-top: 50px;
            background: #AAA url("http://www.ipalaces.org/weird/mainbg.gif"); 
        }
        #picture {
            border-top: 1px solid #EEE; 
            border-bottom: 1px solid #EEE;
            height: 100px;
            width: 1000px;

        }
    </STYLE>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <TITLE>Imperial Palaces</TITLE>
</HEAD>
<BODY>


<DIV id="main">
    <IMG id="picture" src="http://www.ipalaces.org/weird/mainbg.gif" alt="picture">
</DIV>


</BODY>
</HTML>

Answer 1

这似乎在Chrome 2上运行正常：http://skipall.com/2vb.jpg
请记住，Chrome 3仍处于测试阶段，可能可能这只是一个错误（当然我不确定）。

Answer 2

要进行调试，我想我会将填充和边框清零 - 检查差异，然后尝试用IMG代替DIV标签来检查它是否是容器或IMG有故障。甚至可以查看几个大纲属性，看看究竟发生了什么：

#main {
  padding: 0;
}
#picture {
  border: 1px solid #EEE;
  border-width: 1px 0;
}
/* and later... */
#main, #picture {
  outline: 1px solid red;
}

Chrome调整CSS背景网址图片的大小

2 个答案: