Question

我知道之前已经问过这个问题，但我的情况有所不同，我还没有找到解决方案。这是我的问题：

我有一个复选框，当您单击它时，隐藏的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">
.....

JS

    $(document).ready(function(){
      $('#modelbox').click(function(){
        $(".modelinfo").slideToggle('slow');
        $(this).toggleClass('divactive');
    });

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;
}

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

我希望有人可以提供帮助！

Answer 1

使用你的CSS我注意到display: table ;导致了“打嗝”......

.modelsdiv {
    display: block;
    width: 100%;
    margin-left: 15% ;/*select a suitable value :) */
}

每个浏览器都有自己的“css默认值”，在某些情况下会影响它们显示的网络方面...我不能确定它是你的情况，但你可以尝试重置一些值的开头你的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...*/
}

希望它有所帮助。

Answer 2

问题在于firefox在display：table;由于某些原因。我不得不更改以下代码：

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

致：

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

你也可以使用display：block或者其他什么，但对我来说 - 保持中心 - 这就是你要走的路。

谢谢大家的帮助！

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

2 个答案: