firefox和chrome的窗體造型差異

Question

我的項目有一個表單元素。我使用Firefox設計它。它在Firefox中看起來不錯。但是，當我在鉻上測試它時，它會變形。一些元素向下移動一些，並且一些元素傾向於移出邊界。我如何解決這類問題？

在Firefox：

在鉻：（在底部登記按鈕進一步向下移動）

#mydiv{ 
 
    width:90%; 
 
    height:640px; 
 
    position:relative; 
 
    left:20px; 
 
    border-radius:4px; 
 
    border:1px solid black; 
 
    top:0px; 
 
    margin-bottom:20px; 
 
    margin-top:40px; 
 
     margin-bottom:100px; 
 
    box-sizing:border-box; 
 

 
    } 
 

 
    #forwrite{ 
 
    width:400px; 
 
    height:560px; 
 
    position:absolute; 
 
    left:430px; 
 
    top:0px; 
 
    border:1px solid black; 
 
    border-top-left-radius:5px; 
 
    border-top-right-radius:5px; 
 
    margin-bottom:20px; 
 
    margin-top:40px; 
 
     margin-bottom:100px; 
 
    box-sizing:border-box; 
 
    } 
 

 
    .whole{ 
 

 
    width:100%; 
 
    height:auto; 
 
    background:#ececec; 
 
    padding:8px; 
 
    box-sizing:border-box 
 
    } 
 
    .design{ 
 

 
    font-size:15px; 
 
    font-weight:bold; 
 

 
    } 
 
    .field{ 
 
    width:85%; 
 
    height:26px; 
 
    position:relative; 
 
    left:60px; 
 

 
    } 
 

 
    .wrapper{ 
 
    position:relative; 
 
    right:40px; 
 
    padding:8px; 
 
    } 
 

 
    #register{ 
 
    background:#18c785; 
 
    font-size:27px; 
 
    border-top-left-radius:5px; 
 
    border-top-right-radius:5px; 
 
    color:white; 
 
    width:100%; 
 
    height:60px; 
 
    } 
 
    #headwrapper{ 
 

 
    box-sizing:border-box; 
 

 
    } 
 
    #registerbutton{ 
 
    position:relative; 
 
    left:150px; 
 
    top:6px; 
 
    width:89px; 
 
    height:40px; 
 
    cursor:pointer; 
 
    border-radius:6px; 
 
    background:#18c785; 
 
    color:white; 
 
    font-size:20px; 
 
    } 
 
    .design label{ 
 
    font-size:24px; 
 
    }

<form > 
 
<div id='forwrite'> 
 

 
    <div id='headwrapper'><div id='register'>Registration Form </div></div> 
 
    <div class='whole'> 
 
     <div class='design'> 
 
      <label for='username'>Username</label> 
 
     </div> 
 
     <div class='wrapper'> 
 
      <input type='text' class='field' placeholder='Username' name='username' value='' autocomplete='off'> 
 
     </div> 
 
    </div> 
 

 
    <div class='whole'> 
 
     <div class='design'> 
 
      <label for='password'>Password</label> 
 
     </div> 
 
     <div class='wrapper'> 
 
      <input type='password' class='field' name='password' placeholder='Password' value='' autocomplete='off'> 
 
     </div> 
 
    </div> 
 

 
    <div class='whole'> 
 
     <div class='design'> 
 
      <label for='password_again'>Re-enter password</label> 
 
     </div> 
 
     <div class='wrapper'> 
 
      <input type='password' class='field' placeholder='Type Password Again' name='password_again' value='' autocomplete='off'> 
 
     </div> 
 
    </div> 
 

 
    <div class='whole'> 
 
     <div class='design'> 
 
      <label for='name'>Full Name</label> 
 
     </div> 
 
     <div class='wrapper'> 
 
      <input type='text' placeholder='Full Name' class='field' name='name' value='' autocomplete='off'> 
 
     </div> 
 
    </div> 
 

 
    <div class='whole'> 
 
     <div class='design'> 
 
      <label for='email'>Email</label> 
 
     </div> 
 
     <div class='wrapper'> 
 
      <input type='text' class='field' placeholder='Your email' name='email' value='' autocomplete='off'> 
 
     </div> 
 
    </div> 
 

 
    <div id='button'> 
 
     <input type='submit' value='register' id='registerbutton'> 
 
    </div> 
 
    <input type='hidden' name='token' value=""> 
 

 
</div> 
 

 
</form>

Answer 1

我會建議尋找到一種叫normalise.css

鏈接：https://necolas.github.io/normalize.css/

說明：「Normalize.css讓瀏覽器渲染的所有元素更一致，並符合現代標準。它只是針對需要規範化的樣式。「

從網站採取非常方便的工具，尤其是對你的情況