Question

我有桌面版的CSS：

div.bottomnav_table_left {
  width: 50%;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
  display: table-cell;
}
div.bottomnav_table_spacer {
  width: 10px;
  display: table-cell;
}
div.bottomnav_table_right {
  width: 50%;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
  display: table-cell;
}

这个小窗口版本的CSS：

  @media screen and (max-width: 700px) {
  div.bottomnav_table_left {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
    float: left;
  }
  div.bottomnav_table_spacer {
    display: none;
    width: 0px;
    height: 0px;
  }
  div.bottomnav_table_right {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
    float: left;
  }
  }

（我已经尝试将CSS代码示例限制为核心。我希望这没关系。）

在IE，Opera，Chrome和FireFox上，我可以上下调整窗口大小，效果很好。但是，在Safari上它将使用初始大小，但调整浏览器窗口大小只能工作一次。

如果您将Safari重新调整大小（例如小到桌面到小型），它将不再有效。它不会将DIV放在彼此的顶部，而是将它们水平放置在彼此旁边。

Safari和CSS媒体查询

0 个答案: