Css p标签和输入标签之间的一个像素间隙_Css_Internet Explorer 6_Internet Explorer 7

Css p标签和输入标签之间的一个像素间隙

css

Css p标签和输入标签之间的一个像素间隙,css,internet-explorer-6,internet-explorer-7,Css,Internet Explorer 6,Internet Explorer 7,为什么在IE6和IE7的以下代码中，p标签的顶部和底部之间会产生一个像素的间隙，而在Firefox或IE8中却没有？我一直在努力创建搜索框有趣的是，他们没有IE6或IE7中的bug。我做错了什么 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

为什么在IE6和IE7的以下代码中，p标签的顶部和底部之间会产生一个像素的间隙，而在Firefox或IE8中却没有？我一直在努力创建搜索框有趣的是，他们没有IE6或IE7中的bug。我做错了什么

  <!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">
    <head>
        <title></title>
        <style type="text/css">
            #sbox
            {
                overflow: hidden;
            }
            #sbox p
            {
                /*border:1px solid #dae7fa; */
                float:left;
                display: block;
                border: 1px solid red;
                width: 208px;
                padding: 0;
            }
            input#q
            {
                font-size: 11px;
                padding: 3px;
                border: 1px solid blue;
                width: 200px;
                color: #999999;
            }
        </style>
    </head>
    <body>
        <div id="sbox">
            <p>
                <input id="q" type="text" value="Search..." />
            </p>
        </div>
    </body>
    </html>


#sbox
{
溢出：隐藏；
}
#sbox p
{
/*边框：1px实心#dae7fa*/
浮动：左；
显示：块；
边框：1px纯红；
宽度：208px；
填充：0；
}
输入#q
{
字体大小：11px；
填充：3倍；
边框：1px纯蓝色；
宽度：200px；
颜色：#999999；
}

添加

浮动：左输入#q。这将得到坍缩p并消除间隙
 添加浮动：左输入#q。这将得到坍缩p并消除间隙
 我要做的第一件事是使用某种类型的CSS重置，然后从那里开始使用样式-它提供了更大程度的浏览器兼容性，因为它有效地将所有默认值设置在“应该”的位置。检查这个：对不起，我确实这么做了，但在创建示例时忘记了。我要做的第一件事是使用某种类型的CSS重置，然后从那里开始使用样式-它提供了更大程度的浏览器兼容性，因为它有效地将所有默认值设置在“应该”的位置。检查这个：对不起，我确实做了，但在创建示例时忘记了