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让浏览器渲染的所有元素更一致，并符合现代标准。它只是针对需要规范化的样式。“

从网站采取非常方便的工具，尤其是对你的情况