在firefox和chrome

Question

我的项目有一个表单元素。我用Firefox设计了它。它在Firefox中看起来不错。但是当我在镀铬上测试它时会变形。一些元素向下移动了一些元素，一些元素倾向于移出边界。我如何解决这类问题？

在Firefox中：

在chrome中:( 底部的注册按钮向下移动）

    #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/

描述：＆＃39; Normalize.css使浏览器更加一致地呈现所有元素并符合现代标准。它只针对需要规范化的样式。＆＃39;

取自网站，非常方便的工具，尤其适合您的情况