Chrome浏览器与火狐浏览器中的框问题

在Chrome中，请注意“您的联系信息”下的input区域与div#contact的边框对齐。另请注意，“消息”下的textarea不与该边界对齐;它移动了几个像素。这不是我喜欢的行为。 Chrome screencap Chrome浏览器与火狐浏览器中的框问题

在Firefox中，所有东西都排在左边。这有点困难，但你可以在这个screencap中看到。这是我喜欢的行为。 Firefox screencap

我的问题很明显：我如何让这些输入区域排列在左边（如在Firefox图像中）？

以下是为页面的该部分（位于页面的页脚）呈现的HTML（非工作框架form代码）。

<div id="footer"> 
    <div id="contact"> 
    <h1>Talk to me</h1> 
     <div id="email-me">You can email me at <a href="mailto:[email protected]">[email protected]</a><br/> 
     or fill out the form below! 
    </div> 
    <form> 
     <div id="email"> 
     <h2>Your contact info</h2> 
     <input type="text"/><br/> 
     </div> 
     <div id="message"> 
     <h2>Message</h2> 
     <textarea rows="10" cols="75"></textarea><br/> 
     </div> 
     <input class="buttons" type="submit" value="Send"/> 
    </form> 
    </div> 
</div>

这里是CSS。这段时间很长，所以我要编辑一些部分，但是我决定不要这样做，以防一些小小的部分产生变化。

#footer { 
    clear:both; 
    background-color:#8BA5B5; 
    min-height:400px; 
    font-size:13px; 
    font-family:Helvetica,Verdana,Arial,sans-serif; 
    color:#fff; 
    padding-left:105px; 
    padding-top:30px; 
    padding-bottom:45px; 
    position:relative; 
    top:5px; 
    overflow:hidden; 
} 

    #footer h1 { 
    font-size:15px; 
    margin:0px; 
    margin-bottom:5px; 
    } 

    #footer a { 
    color:#DAEBF5; 
    text-decoration:none; 
    margin-bottom:5px; 
    } 

    #footer a:visited { 
     color:#333; 
     text-decoration:none; 
    } 

    #footer a:hover { 
     text-decoration:underline; 
    } 

    #email-me { 
    font-size:16px; 
    padding-left:2px; 
    margin-bottom:10px; 
    text-align:center; 
    } 

    #email-me a { 
     font-size:18px; 
     font-style:normal; 
    } 

    #contact { 
    float:left; 
    overflow:hidden; 
    font-style:oblique; 
    font-family:georgia,times,serif; 
    } 

    #contact h1 { 
     font-size:44px; 
     font-style:normal; 
     text-align:center; 
     font-family:helvetica,verdana,arial,sans-serif; 
    } 

    #contact h2 { 
     margin:0px; 
     font:inherit; 
    } 

    #contact input { 
     background-color:transparent; 
     border:1px solid #fff; 
     color:#fff; 
     width:50%; 
    } 

    #contact textarea { 
     background-color:transparent; 
     border:1px solid #fff; 
     color:#fff; 
    } 

    #contact #message { 
     margin-top:5px; 
     margin-bottom:5px; 
    } 

    #contact .buttons { 
     font-family:inherit; 
     font-weight:800; 
     font-size:12px; 
     padding:5px; 
     width:100%; 
     background-color:#fff; 
     color:#8BA5B5; 
    }

来源

2011-05-31 user5243421

它接缝，你的利润是关闭...您是否使用了CSS复位水平在所有浏览器的风格？

尝试设置margin：0;您输入

的CSS重置，我建议：

http://meyerweb.com/eric/tools/css/reset/

来源

2011-05-31 19:43:50 Zuul

另一个CSS来看看是https://github.com/necolas/normalize.css/ 自述：规范化.css是一个可自定义的CSS文件，使浏览器可以更加一致地呈现所有元素，并符合现代标准。我们研究了默认浏览器样式之间的差异，以便仅精确定位需要规范化的样式。 – lhoess 2011-12-16 15:42:30

#contact input, #contact textarea { 
    margin:0px; 
}

来源

2011-05-31 19:42:13 AlexC

Chrome浏览器与火狐浏览器中的框问题

回答

相关问题