Jquery Firefox页面“；移动”；隐藏/显示div时

我知道以前有人问过这个问题，但我的情况不同，我还没有找到解决办法。这是我的问题：

我有一个复选框，当你点击它时，一个隐藏的div就会显示出来。但是，我的页面会向左移动。但是，在我的案例中，没有出现滚动条

如果再次单击复选框，div将被隐藏，页面将再次向右移动。这只发生在Firefox中（到目前为止）。在Chrome上试过，但没有成功

这是我的密码：

HTML

<div class="main">
   <div class="modelsdiv">
      <form id="models" name="models" method="post" novalidate="novalidate">
        <fieldset>

          <label for="type" id="type" class="title">Artist type: <span class="required">*</span>&nbsp;<span class="small">Can be more then 1</span></label>
          <input type="checkbox" name="arttype[]" id="modelbox" class="typebox" value="Model" required=""><span class="box">Model</span><br /> 
<div class="modelinfo">
.....

CSS

body {
background: #323132;
overflow-y: scroll;
}
.modelsdiv {
display: table;
width: 100%;
}
form {
display: table-cell;
vertical-align: middle;
}
form label {
display: block;
margin-bottom:.2em;
font-family:"Inconsolata", sans-serif;
font-size:15px;
line-height:15px;
color:#BDBDBD;
text-align: left;
font-weight: bold;
}
form label.error {
color:#DF0101;
}
form label.errorg, label.errort {
display: none;
color:#DF0101;
}
form textarea { 
margin-bottom:5px;
font-family:"Inconsolata", sans-serif;
font-size:14px;
font-size:1.4rem;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
background:#6E6E6E;
border:1px solid #BDBDBD;
-moz-border-radius:0.2em 0.2em 0.2em 0.2em;
-webkit-border-radius:0.2em 0.2em 0.2em 0.2em;
border-radius:0.2em 0.2em 0.2em 0.2em;
color: #BDBDBD;
width:359px; 
height:192px;
}
form input[type="text"], form input[type="tel"], form input[type="email"], form input[type="url"] {
margin-bottom:5px;
font-family:"Inconsolata", sans-serif;
font-size:14px;
font-size:1.4rem;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
background:#6E6E6E;
border:1px solid #BDBDBD;
-moz-border-radius:0.2em 0.2em 0.2em 0.2em;
-webkit-border-radius:0.2em 0.2em 0.2em 0.2em;
border-radius:0.2em 0.2em 0.2em 0.2em;
color: #BDBDBD;
}
fieldset {
border:0px;
margin:0 auto;
padding:0;
width: 350px;
}
.required {
color:#c0392b;
}
#success, #error {
display:none;
}
#success span, #error span {
display:block;
position:fixed;
top:40%;
left:36%;
}
#success span p, #error span p {
}
#success span p {
color:#01DF01;
}
#error span p {
color:#DF0101;
}
input[type="submit"] {
border:3px #BDBDBD solid;   
background-color: #1C1C1C;
color: #BDBDBD;
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
width: 100px;
height: 40px;
}
.box {
color: #BDBDBD;
font-family:"Inconsolata", sans-serif;
}
.small {
font-family:"Inconsolata", sans-serif;
font-size:15px;
line-height:15px;
color:#BDBDBD;
text-align: left;
text-decoration: none;
font-weight: normal;
}
.modelinfo {
display: none;
}
.divactive {
display: inline-block;
}

我尝试过不同的显示类型和位置，但它一直在发生

---

我希望有人能帮忙

在玩CSS时，我注意到

显示：table导致“打嗝”


每个浏览器都有自己的“css默认值”，在某些情况下会影响它们显示的web方面。。。我不能确定这是您的情况，但您可以尝试重置css文件开头的一些值：

/*html, body, div... the tags you want to reset... or '*' for all.*/
html, body{
 margin: 0 ;
 padding: 0 ;
 /*include all attributes you think are suitable...*/
}

希望能有所帮助。
这方面的问题是firefox在display:table；出于某种原因。我必须更改以下代码：

.modelsdiv {
display: table;
width: 100%;
}

致：

你也可以使用display:block或其他任何东西，但对我来说——保持事物的中心——这是一种方法

谢谢大家的帮助
 
.muainfo
在你的HTML标记中的什么地方？@zgood:编辑了我的帖子。这是个打字错误。谢谢你的展示。这是一个，我看不出有什么奇怪的地方。@skobaljic如果你在
中添加更长的字符串，你会看到“跳跃”，他说，在他的例子
中，但是在我的例子中没有出现滚动条，这意味着内容长度无关紧要（我怀疑这是真的，因此我创建了小提琴）.遗憾的是，这没用。但是谢谢你的建议！我也发现了。但使用显示：块；将所有内容向左移动。所以我添加了display:flex；弯曲方向：行；柔性包装：包装；证明内容：中心；它在中间。这样，就不会再向左移动了！愚蠢的是firefox有这个问题。。。您可以将此添加到您的帖子中，我将其标记为已回答：）是的，每个浏览器都以不同的方式实现组件。。。谢谢，但是你找到了答案，不是我，也许你应该把答案贴出来：D我会投你一票呵呵
/*html, body, div... the tags you want to reset... or '*' for all.*/
html, body{
 margin: 0 ;
 padding: 0 ;
 /*include all attributes you think are suitable...*/
}

.modelsdiv {
display: table;
width: 100%;
}

.modelsdiv {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}