如何防止在Firefox中浮动?[英]How to prevent a floating on top of other divs in Firefox? 本文翻译自  md1hunox  查看原文  2012-10-21  2192    css/

In the project that I'm doing, I have multiple divisions one below another and I load them one after other depending on the navbar choice. Now that works fine if I don't have any fancy elements in the <div>. But when I added a form to a div it started floating on the div above it. This happens when I select any element in form. Also, I can't seem to be able to select any item that's there in the dropDown list that's there in the <form>.

在我正在做的项目中，我有多个部门，一个在另一个下面，我根据navbar的选择给他们一个接一个。现在，如果我在

中没有任何花哨的元素，那么它就可以正常工作了。但当我向div添加表单时，它开始在它上面的div上浮动。当我选择表单中的任何元素时，就会出现这种情况。而且，我似乎无法选择

中下拉列表中的任何项。

Here is sample code of the list of divisions

下面是分部列表的示例代码

 <div class="container">
            <div class="st-container">

                    <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
                    <a href="#st-panel-1">Serendipity</a>
                    <input type="radio" name="radio-set" id="st-control-2"/>
                    <a href="#st-panel-2">Happiness</a>
                    <input type="radio" name="radio-set" id="st-control-3"/>
                    <a href="#st-panel-3">Tranquillity</a>
                    <input type="radio" name="radio-set" id="st-control-4"/>
                    <a href="#st-panel-4">Positivity</a>
                    <input type="radio" name="radio-set" id="st-control-5"/>
                    <a href="#st-panel-5">Passion</a>

                    <div class="st-scroll">


                            <div class="st-panel" id="st-panel-1">
                                <h2>Serendipity</h2>
                                <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
                            </div >

                   <!--problematic div starts-->         
               <div id="RepresentativeRegistrationPage" class="st-panel st-color">
        <form action="#" method="post" id="registration-form" novalidate="novalidate">
            College:
            <select class="required" id="college_id" name="college_id">
            <option selected="selected" value="">Select College</option>
            <option value="4">St. Xaviers College</option>
            <option value="5">DMC College</option>
            </select><span class="error_msg"></span><br>

            First Name: <input type="text" value="" class="required" name="first_name" id="first_name"><span class="error_msg"></span><br>
            Last Name: <input type="text" value="" class="required" name="last_name" id="last_name"><span class="error_msg"></span><br>
            Username: <input type="text" class="required" name="username" id="username"><span class="error_msg"></span><br>
            Password: <input type="password" class="required" name="password" id="password"><span class="error_msg"></span><br>
            Confirm Password: <input type="password" class="required" name="confirm_password" id="confirm_password"><span class="error_msg"></span><br>
            Mobile Number: <input type="text" value="" class="required" name="mobile_number" id="mobile_number"><span class="error_msg"></span><br>
            Email address: <input type="text" value="" class="required" name="email" id="email"><span class="error_msg"></span><br>
            <input type="submit" value="Register" name="submit">
        </form>
        </div>
                            <!--problematic div ends -->  

             <div class="st-panel" id="st-panel-3">
                      <h2>Tranquillity</h2>
                      <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
             </div>

             <div class="st-panel st-color" id="st-panel-4">
                       <h2>Positivity</h2>
                       <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
             </div>

             <div class="st-panel" id="st-panel-5">
                        <h2>Passion</h2>
                        <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
             </div>

      </div><!-- // st-scroll -->

    </div><!-- // st-container -->

And here is the CSS

这是CSS

.st-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}

.st-container > input,
.st-container > a {
    position: fixed;
    bottom: 0px;
    width: 20%;
    cursor: pointer;
    font-size: 16px;
    height: 34px;
    line-height: 34px;
}

.st-container > input {
    opacity: 0;
    z-index: 1000;
}

.st-container > a {
    z-index: 10;
    font-weight: 700;
    background: #e23a6e;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}

/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
.st-container:before {
    content: '';
    position: fixed;
    width: 100%;
    height: 34px;
    background: #e23a6e;
    z-index: 9;
    bottom: 0;
}

#st-control-1, #st-control-1 + a {
    left: 0;
}

#st-control-2, #st-control-2 + a {
    left: 20%;
}

#st-control-3, #st-control-3 + a {
    left: 40%;
}

#st-control-4, #st-control-4 + a {
    left: 60%;
}

#st-control-5, #st-control-5 + a {
    left: 80%;
}

.st-container > input:checked + a,
.st-container > input:checked:hover + a{
    background: #821134;
}

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
    bottom: 100%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #821134;
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
}

.st-container > input:hover + a{
    background: #AD244F;
}

.st-container > input:hover + a:after {
    border-bottom-color: #AD244F;
}

.st-scroll,
.st-panel {
    position: relative;
    width: 100%;
    height: 100%;
}

.st-scroll {
    top: 0;
    left: 0;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;

    /* Let's enforce some hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
}

.st-panel{
    background: #fff;
    overflow: hidden;
}

#st-control-1:checked ~ .st-scroll {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -o-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
    -webkit-transform: translateY(-300%);
    -moz-transform: translateY(-300%);
    -o-transform: translateY(-300%);
    -ms-transform: translateY(-300%);
    transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
    -webkit-transform: translateY(-400%);
    -moz-transform: translateY(-400%);
    -o-transform: translateY(-400%);
    -ms-transform: translateY(-400%);
    transform: translateY(-400%);
}


/* Content elements */

.st-deco{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -100px;
    background: #fa96b5;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}

[data-icon]:after {
    content: attr(data-icon);
    font-family: 'RaphaelIcons';
    color: #fff;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
    position: absolute;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 90px;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
    -webkit-transform: rotate(-45deg) translateY(25%);
    -moz-transform: rotate(-45deg) translateY(25%);
    -o-transform: rotate(-45deg) translateY(25%);
    -ms-transform: rotate(-45deg) translateY(25%);
    transform: rotate(-45deg) translateY(25%);
}

.st-panel h2 {
    color: #e23a6e;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
    position: absolute;
    font-size: 54px;
    font-weight: 900;
    width: 80%;
    left: 10%;
    text-align: center;
    line-height: 50px;
    margin: -70px 0 0 0;
    padding: 0;
    top: 50%;
    -webkit-backface-visibility: hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
    0% {
        -webkit-transform: translateY(-40px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);  
        opacity: 1;
    }
}

@-moz-keyframes moveDown{
    0% {
        -moz-transform: translateY(-40px);
        opacity: 0;
    }
    100% {
        -moz-transform: translateY(0px);  
        opacity: 1;
    }
}

@-o-keyframes moveDown{
    0% {
        -o-transform: translateY(-40px);
        opacity: 0;
    }
    100% {
        -o-transform: translateY(0px);  
        opacity: 1;
    }
}

@-ms-keyframes moveDown{
    0% {
        -ms-transform: translateY(-40px);
        opacity: 0;
    }
    100% {
        -ms-transform: translateY(0px);  
        opacity: 1;
    }
}

@keyframes moveDown{
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);  
        opacity: 1;
    }
}

.st-panel p {
    position: absolute;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    color: #8b8b8b;
    z-index: 2;
    padding: 0;
    width: 50%;
    left: 25%;
    top: 50%;
    margin: 10px 0 0 0;
    -webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
    -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    animation: moveUp 0.6s ease-in-out 0.2s backwards;
}

@-webkit-keyframes moveUp{
    0% {
        -webkit-transform: translateY(40px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);  
        opacity: 1;
    }
}

@-moz-keyframes moveUp{
    0% {
        -moz-transform: translateY(40px);
        opacity: 0;
    }
    100% {
        -moz-transform: translateY(0px);  
        opacity: 1;
    }
}

@-o-keyframes moveUp{
    0% {
        -o-transform: translateY(40px);
        opacity: 0;
    }
    100% {
        -o-transform: translateY(0px);  
        opacity: 1;
    }
}

@-ms-keyframes moveUp{
    0% {
        -ms-transform: translateY(40px);
        opacity: 0;
    }
    100% {
        -ms-transform: translateY(0px);  
        opacity: 1;
    }
}

@keyframes moveUp{
    0% {
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);  
        opacity: 1;
    }
}

/* Colored sections */

.st-color,
.st-deco{
    background: #fa96b5;
}
.st-color [data-icon]:after {
    color: #fa96b5;
}
.st-color .st-deco {
    background: #fff;
}
.st-color h2 {
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p {
    color: #fff;
    color: rgba(255,255,255,0.8);
}

@media screen and (max-width: 520px) {
    .st-panel h2 {
        font-size: 42px;
    }

    .st-panel p {
        width: 90%;
        left: 5%;
        margin-top: 0;
    }

    .st-container > a {
        font-size: 13px;
    }
}
@media screen and (max-width: 360px) {
    .st-container > a {
        font-size: 10px;
    }

    .st-deco{
        width: 120px;
        height: 120px;
        margin-left: -60px;
    }


}
body{
    font-family: Georgia, serif;
    background: #ddd;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
a{
    color: #555;
    text-decoration: none;
}
.clr{
    clear: both;
    padding: 0;
    height: 0;
    margin: 0;

This problem only happens in Firefox ( I'm using Firefox 16.0). Here is a JSFiddle of the problem. Click on the "Happiness" option in navbar to get to the problematic section. Can someone please help me sort out the issue?

这个问题只在Firefox中出现(我使用的是Firefox 16.0)。这里有一个问题的概要。单击navbar中的“幸福”选项，进入有问题的部分。谁能帮我解决这个问题吗?

4 个解决方案

#1

It seems like the css magic confuses Firefox in terms of "tabbing". This is a very interesting issue because it seems like Firefox tries to locate the tag and automatically align the viewport to make at the top, though it already is... CSS wise, I can do nothing to help, as even with overflow:hidden, you can still use the middle mouse button to scroll the body and thus cause the out-of-alignment issue present in Firefox. With google chrome, pressing tab on the "Serendipity" tab multiple times will cause the viewport to scroll to the input tab directly. See Avoid unwanted scrolling triggered by keyboard navigation in IE?

看起来css的魔力让Firefox在“标签”上迷惑了。这是一个非常有趣的问题，因为看起来Firefox试图找到标签并自动地将viewport对齐到顶部，尽管它已经……CSS方面，我不能做任何帮助，即使是使用overflow:hidden，您仍然可以使用鼠标中键来滚动主体，从而导致Firefox中出现的对齐问题。使用谷歌chrome，在“Serendipity”选项卡上多次按下tab，将导致viewport直接滚动到input选项卡。看到避免不必要的滚动由键盘导航在IE?

However, with javascript, this can all be easily avoided, if you're willing to sacrifice the "no javascript" aspect of your site.

但是，如果您愿意牺牲站点的“无javascript”方面，那么使用javascript就可以轻松避免这种情况。

var tabs = document.getElementById("registration-form").elements;
for (var i = 0; i < tabs.length; i++) {
    tabs[i].setAttribute("tabindex", i + 1);
    tabs[i].addEventListener('keydown', function(e) {
        var e = window.event || e;
        var keyCode = e.keyCode || e.which;

        if (keyCode == 9) {
            e.preventDefault();

            var x = window.scrollX,
                y = window.scrollY;

            var elementToFocus = document.getElementById("registration-form").elements[this.getAttribute("tabindex")];
            if (typeof elementToFocus == "undefined") {
                elementToFocus = document.getElementById("registration-form").elements[0];
            }
            elementToFocus.focus();
            window.scrollTo(x, y);

        }
    });
}
window.addEventListener("scroll", function(e) {
    var e = window.event || e;
    e.preventDefault();
    window.scrollTo(0, 0);
});​

http://jsfiddle.net/DGFat/15/

http://jsfiddle.net/DGFat/15/

#2

if you want to start a new div, then use clear attribute to prevent inheritance from the previous div. Something like this:

如果您想要启动一个新的div，那么使用clear属性来防止继承前一个div。

<div your style here></div>
<div Style="clear:both"></div>
<div You second div></div>

#3

I think the problem is your use of input for "everything".

我认为问题在于你对“一切”的输入。

Adding: [type="checkbox"] to your CSS at this declaration:
.st-container > input, .st-container > a { ... } becoming .st-container > input[type="checkbox"], .st-container > a { ... }

在这个声明中添加:[type="checkbox"]到您的CSS: .st-container >输入，.st-container > a{…}为.st-container >输入[type="checkbox"]， .st-container > a{…}

Stops the tabbing issue in FF, but it breaks the positioning a little, and throws off the navigation. Sounds worse than it is.

在FF中停止制表问题，但它稍微破坏了定位，并抛出了导航。听起来更糟。

All browsers have built-in properties for input elements. I think your CSS implementation just doesn't do a good enough job at isolating your functionality from presentation.

所有浏览器都有输入元素的内置属性。我认为您的CSS实现在将功能与表示分离方面做得不够好。

#4

Are you trying to put that form on center? Check this out:

你想把那个表格放在中间吗?看看这个:

Add this to your css (jsFiddle here: http://jsfiddle.net/DGFat/8/)

将它添加到您的css (jsFiddle: http://jsfiddle.net/DGFat/8/)

form {
    height:200px;
    position: absolute;
    left: 50%;
    width:300px;
    top: 50%;
    margin: -100px 0 0 -150px;
    background: gray; /*just so you could see it better */
}