Question

在Chrome中查看此JSFiddle，当您将结果窗格的宽度增加到大于768px然后将其拖动以减小它，然后将其恢复，左侧的菜单为（Home，Page2）在它下面的元素中呈现。但是，如果页面呈现（即您按“运行”）并且结果窗格> = 768px，则菜单正确地浮动到右侧。

这是一个错误吗？可以避免吗？

这是小提琴的完整代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
    #nav {

    }

    #nav ul {
      margin: 0;
      list-style: none;
    }

    #nav ul li {
      padding: 0 10px;
    }

    #content {
      background-color: #ccc;
      height: 200px;
    }

    @media (min-width: 768px) {  
      #nav ul {
        float: right;
      }

      #nav ul li {
        float: left;
      }  
    }
  </style>
</head>
<body>
    <div id="nav">  
      <a href="/">
        Logo Goes Here
      </a>
      <ul>
        <li><a href="news.html">Home</a></li>
        <li><a href="people.html">Page 2</a></li>
      </ul>
    </div>
    <div id="content">
    </div>
</body>
</html>

Answer 1

作为一种解决方法，我最终强制重新调整大小：

$(document).ready(function() {
  var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
  if(is_chrome) {
    $(window).resize(function(){
      // .show(0) is required for Chrome
      $('#nav ul').hide().show(0);
    });
  }
});

在转换媒体查询和浮动元素时，为什么Chrome的行为会有所不同？

1 个答案: