jquery - 调整浏览器(谷歌浏览器)大小时 CSS Float 的奇怪行为？

Question

我正在为我的网站制作导航栏...

我目前正在使用谷歌浏览器，我注意到在调整浏览器大小后，我的一些 li 使用 float:right 时不会出现在正确的位置，它们在我调整浏览器大小之前的位置。

这是我的 HTML:

<div class="navbar">
    <ul class="margin-center">
        <li class="brand pull-left">
            <a href="#">lolnode</a>
        </li>
        <li class="menu-button"></li>
        <div class="collapse">
            <li class="link">
                <a href="#">Home</a>
            </li>
            <li class="link dropdown">
                <a href="#">Sports</a>
                <ul class="dropdown">
                    <li><a href="#">Football</a></li>
                    <li><a href="#">Tennis</a></li>
                    <li><a href="#">Badminton</a></li>
                </ul>
            </li>
            <li class="link pull-right">
                <a href="#">Contact Us</a>
            </li>
            <li class="link pull-right">
                <a href="#">About Us</a>
            </li>
        </div>
    </ul>
</div>

这是我的 CSS:

body {background:#F0F1F2;}
html, body {
    width:100%;
    min-height:100%;
}
* {
    margin:0;
    padding:0;
    font-family:'bl-reg', sans-serif;
    font-size:12px;
    color:#333;

    z-index:inherit;
}
h1, h2, h3, h4, h5, h6, p, a, li, tr, th, td {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:default;
}
a {
    font-family:'bl-reg', sans-serif;
    font-weight:inherit;
    font-size:inherit;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}
a:hover {
    text-decoration:underline;
}
.margin-center {
    margin:auto auto;
}
.pull-left {
    float:left;
}
.pull-right {
    float:right;
}

div.navbar {
    height:48px;
    overflow:visible;
    position:relative;
    background:#FFF;
    box-shadow:0 0 5px rgba(0,0,0,0.4);

    z-index:100;
}
    div.navbar > ul {
        width:975px;
        list-style-type:none;
    }
        div.navbar > ul li.brand,
        div.navbar ul li.link {
           display:inline-block;    
        }
        div.navbar > ul li.brand {
            font-weight:bold;
            font-size:14px;
        }
        div.navbar ul li.link {
            font-size:12px;
        }
        div.navbar > ul li a {
            display:block;
            padding:15px;
        }
        div.navbar > ul li.link a {
            display:block;
            padding:16.5px 15px;
            color:rgba(51,51,51,0.75);
        }
        div.navbar > ul li.link a:hover {
            color:rgba(51,51,51,1); 
        }
        div.navbar > ul li a:hover {
            text-decoration:none;
        }
    div.navbar > ul li > ul.dropdown {
        min-width:100px;
        position:absolute;
        margin-top:48px;
        margin:0;
        padding:0;
        background:#FFF;
        box-shadow:0 3px 5px rgba(0,0,0,0.4);
        border-bottom-left-radius:5px;
        border-bottom-right-radius:5px;
        list-style-type:none;

        display:none;
        z-index:99;
    }
        div.navbar > ul li > ul.dropdown > li > a {
            padding:5px 15px;
        }

}
@media screen and (min-width: 975px) {

    div.navbar > ul {
        width:975px;  
    }
    div.navbar > ul > li.menu-button {
        display:none;
    }
}
@media screen and (max-width: 974px) {

    div.navbar > ul {
        width:100%;
    }
    div.navbar > ul > li.menu-button {
        width:20px;
        height:20px;
        margin-top:14px;
        margin-right:15px;
        float:right;
        background:url(./assets/icon-menu.png) center no-repeat;
        border:solid 1px #333;
        border-radius:5px;
        opacity:0.5;
    }
        div.navbar > ul > li.menu-button:hover {
            opacity:1;
            cursor:pointer;
        }
    div.navbar > ul > div.collapse {
        width:100%;
        position:absolute;
        margin-top:48px;
        background:#222;

        display:none;
    }
        div.navbar > ul > div.collapse > li,
        div.navbar > ul > div.collapse > li > a {
            display:block;
            color:rgba(255,255,255,0.5);
        }
        div.navbar > ul > div.collapse > li.pull-right {
            float:none;
        }
        div.navbar > ul > div.collapse > li:hover,
        div.navbar > ul > div.collapse > li > a:hover {
            background:#232323;
            color:rgba(255,255,255,0.75);
        }
}

jQuery

$(document).ready(function() {  
    $('body').fadeIn();

    if($('div.navbar > ul > li.menu-button').length) {
       $('div.navbar > ul > li.menu-button').on('click', function() {
           $('div.navbar > ul > div.collapse').toggle();
       });
    };

    $('a').on('click', function() {
        if($(this).has('.dropdown')) {
            if($(this).siblings('ul.dropdown').css('display') == 'none') {
                $(this).siblings('ul.dropdown').css('display', 'block');
            } else if($(this).siblings('ul.dropdown').css('display') == 'block') {
                $(this).siblings('ul.dropdown').css('display', 'none');
            };
        };
    });

    $(window).on('resize', function() {
        var win = $(this);

        if(win.width() > 974) {
            if($('div.navbar > ul > div.collapse').css('display') == 'none') {
                $('div.navbar > ul > div.collapse').toggle();
                $('div.navbar > ul > div.collapse').attr('forced', 'true');
            };
        } else if(win.width() <= 974) {
            if($('div.navbar > ul > div.collapse').attr('forced') == 'true') {
                $('div.navbar > ul > div.collapse').toggle();
                $('div.navbar > ul > div.collapse').removeAttr('forced');
            };
        };
    });
});

我created a jsbin here重现发生在我身上的事情，我会解释它:

重现我的问题的步骤:

1. 将浏览器的宽度缩小到 975 像素以下
2. 点击导航栏右边的框
3. 将浏览器扩展到 975 像素以上
4. 现在 about 和 contact 应该错位了

(低于导航栏，但仍然向右浮动)我想知道如何解决这个问题，看来我只是在开发人员选项中禁用并重新启用 float:right ，但如果人们要访问该网站，这还不够好。

关于如何解决这个问题有什么想法吗？

Answer 1

一切都在花车里。切换时， float 变为 float: none。然后在调整大小时将其带入。

Here is your new jsBin这是解决问题的方法:

1. 将全屏时右侧的两个 li 赋予另一个类(我将它们设为 .right)。这只是为 jQuery 创建一个钩子(Hook):

   <li class="right link pull-right">
       <a href="#">Contact Us</a>
   </li>
   <li class="right link pull-right">
       <a href="#">About Us</a>
   </li>
   

2. 从 @media screen and (max-width: 974px) 中删除这一行:

   div.navbar > ul > div.collapse > li.pull-right {
       float:none;
   }
   

3. 在调整大小时，我们将删除 pull 类或将其返回:

   $('.right').removeClass('pull-right'); //Inside <= 974
   $('.right').addClass('pull-right'); //Inside > 974
   

4. 添加窗口大小检查并在加载时宽度小于 974px 时删除类:

   var smallCheck = $(window).width(); 
   
   if (smallCheck <= 974 ) {
       $('.right').removeClass('pull-right');
   }
   

   你可以在这里看到它的使用:

$(window).on('resize', function() {
  var win = $(this);

  var smallCheck = $(window).width(); 

    if (smallCheck <= 974 ) {
        $('.right').removeClass('pull-right');
    }

  if (win.width() > 974) {
    if ($('div.navbar > ul > div.collapse').css('display') == 'none') {
      $('div.navbar > ul > div.collapse').toggle();
      $('div.navbar > ul > div.collapse').attr('forced', 'true');
    }
    $('.right').addClass('pull-right'); // add this

  } else if (win.width() <= 974) {
    if ($('div.navbar > ul > div.collapse').attr('forced') == 'true') {
      $('div.navbar > ul > div.collapse').toggle();
      $('div.navbar > ul > div.collapse').removeAttr('forced');
    }
    $('.right').removeClass('pull-right'); // add this

  }
});

这是完整的导航栏。

$(document).ready(function() {
  $('body').fadeIn();
  
    var smallCheck = $(window).width(); 
	
	if (smallCheck <= 974 ) {
		$('.right').removeClass('pull-right');
	}

  if ($('div.navbar > ul > li.menu-button').length) {
    $('div.navbar > ul > li.menu-button').on('click', function() {
      $('div.navbar > ul > div.collapse').toggle();
    });
  }

  $('a').on('click', function() {
    if ($(this).has('.dropdown')) {
      if ($(this).siblings('ul.dropdown').css('display') == 'none') {
        $(this).siblings('ul.dropdown').css('display', 'block');
      } else if ($(this).siblings('ul.dropdown').css('display') == 'block') {
        $(this).siblings('ul.dropdown').css('display', 'none');
      }
    }
  });

  $(window).on('resize', function() {
    var win = $(this);

    if (win.width() > 974) {
      if ($('div.navbar > ul > div.collapse').css('display') == 'none') {
        $('div.navbar > ul > div.collapse').toggle();
        $('div.navbar > ul > div.collapse').attr('forced', 'true');
      }

      $('.right').addClass('pull-right');
    } else if (win.width() <= 974) {
      if ($('div.navbar > ul > div.collapse').attr('forced') == 'true') {
        $('div.navbar > ul > div.collapse').toggle();
        $('div.navbar > ul > div.collapse').removeAttr('forced');
      }

      $('.right').removeClass('pull-right');

    }
  });
});

body {
  background: #F0F1F2;
}
html,
body {
  width: 100%;
  min-height: 100%;
}
* {
  margin: 0;
  padding: 0;
  font-family: 'bl-reg', sans-serif;
  font-size: 12px;
  color: #333;
  z-index: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
tr,
th,
td {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
a {
  font-family: 'bl-reg', sans-serif;
  font-weight: inherit;
  font-size: inherit;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}
.margin-center {
  margin: auto auto;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
div.navbar {
  height: 48px;
  overflow: visible;
  position: relative;
  background: #FFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  z-index: 100;
}
div.navbar > ul {
  width: 975px;
  list-style-type: none;
}
div.navbar > ul li.brand,
div.navbar ul li.link {
  display: inline-block;
}
div.navbar > ul li.brand {
  font-weight: bold;
  font-size: 14px;
}
div.navbar ul li.link {
  font-size: 12px;
}
div.navbar > ul li a {
  display: block;
  padding: 15px;
}
div.navbar > ul li.link a {
  display: block;
  padding: 16.5px 15px;
  color: rgba(51, 51, 51, 0.75);
}
div.navbar > ul li.link a:hover {
  color: rgba(51, 51, 51, 1);
}
div.navbar > ul li a:hover {
  text-decoration: none;
}
div.navbar > ul li > ul.dropdown {
  min-width: 100px;
  position: absolute;
  margin-top: 48px;
  margin: 0;
  padding: 0;
  background: #FFF;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  list-style-type: none;
  display: none;
  z-index: 99;
}
div.navbar > ul li > ul.dropdown > li > a {
  padding: 5px 15px;
}
}
@media screen and (min-width: 975px) {
  div.navbar > ul {
    width: 975px;
  }
  div.navbar > ul > li.menu-button {
    display: none;
  }
}
@media screen and (max-width: 974px) {
  div.navbar > ul {
    width: 100%;
  }
  div.navbar > ul > li.menu-button {
    width: 20px;
    height: 20px;
    margin-top: 14px;
    margin-right: 15px;
    float: right;
    background: url(./assets/icon-menu.png) center no-repeat;
    border: solid 1px #333;
    border-radius: 5px;
    opacity: 0.5;
  }
  div.navbar > ul > li.menu-button:hover {
    opacity: 1;
    cursor: pointer;
  }
  div.navbar > ul > div.collapse {
    width: 100%;
    position: absolute;
    margin-top: 48px;
    background: #222;
    display: none;
  }
  div.navbar > ul > div.collapse > li,
  div.navbar > ul > div.collapse > li > a {
    display: block;
    color: rgba(255, 255, 255, 0.5);
  }
  div.navbar > ul > div.collapse > li:hover,
  div.navbar > ul > div.collapse > li > a:hover {
    background: #232323;
    color: rgba(255, 255, 255, 0.75);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar">
  <ul class="margin-center">
    <li class="brand pull-left">
      <a href="#">lolnode</a>
    </li>
    <li class="menu-button"></li>
    <div class="collapse">
      <li class="link">
        <a href="#">Home</a>
      </li>
      <li class="link dropdown">
        <a href="#">Sports</a>
        <ul class="dropdown">
          <li><a href="#">Football</a>
          </li>
          <li><a href="#">Tennis</a>
          </li>
          <li><a href="#">Badminton</a>
          </li>
        </ul>
      </li>
      <li class="right link pull-right">
        <a href="#">Contact Us</a>
      </li>
      <li class="right link pull-right">
        <a href="#">About Us</a>
      </li>
    </div>
  </ul>
</div>