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瀏覽器與火狐瀏覽器中的框問題

回答

相關問題