重新调整浏览器（谷歌浏览器）时CSS Float的奇怪行为？

时间：2014-11-06 11:29:03

标签： jquery html css

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

我目前正在使用谷歌浏览器，我注意到在重新调整浏览器大小后使用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应该不在位置

    5. （低于导航栏，但仍然向右浮动）我想知道如何修复此问题，似乎我只是在开发人员选项中禁用并重新启用float:right，但这不会如果人们要访问该网站，那就足够了。

    有关如何解决此问题的任何想法？

2 个答案:

答案 0 :(得分：2)

一切都在花车里。切换时，浮点数为float: none。然后在重新调整大小时将其传播。

Here is your new jsBin以下是解决问题的方法：

  1. 当全屏显示另一个类时，给出右侧的两个li（我将它们设为.right）。这只是为jQuery创建一个钩子：

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

    你可以在这里看到这个：

    5. $(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>

答案 1 :(得分：0)

在resize（）上制作类似于获取关闭菜单值的内容。你有切换问题，它仍然是切换给出的值。

相关问题
最新问题