时间戳

首页 > 解决方案 > 为什么这段代码在 Chrome 和 Firefox 中的行为不同/我该如何解决？

html - 为什么这段代码在 Chrome 和 Firefox 中的行为不同/我该如何解决？

问题描述

在 Chrome 中，如果我在 1090px 宽以上查看此代码，则将宽度减小到 1090px 以下，然后将其恢复到 1090px 以上，右栏显示在左栏下方。它在 Firefox 中的外观/行为方式更像是我想要完成的。

我当前的 Chrome 版本是：版本 80.0.3987.132 (Official Build) (64-bit)

我发现我必须使用“扩展片段”选项来查看这里的行为。

.fourSquareImages img{
    max-width:100%;
    height: auto;
}
#leftImages {
    width: 65%;
    text-align: center;
    display: table-cell;
}

#rightImages {
    width: 35%;
    text-align: center;
    display: table-cell;
}
@media only screen and (max-width: 1090px){
  #leftImages {
      width: 48%;
      display: inline-block;
  }
  
  #rightImages {
      width: 48%;
      display: inline-block;
  }
}
<div class="fourSquareImages">
    <div id="leftImages">
      <img border="0" src="http://www.davidreynoldsjewelryandcoin.com/images/estate/deco_bracelet.jpg" width="243" height="186" alt="Art Deco Bracelets"><br>
      <span class="caption">Art Deco Bracelets</span><br>

      <img border="0" src="http://www.davidreynoldsjewelryandcoin.com/images/estate/pansy.jpg" width="243" height="186" alt="Diamond Broaches"><br>
      <span class="caption">Diamond Broaches</span><br>
    </div>
    <div id="rightImages">
      <img border="0" src="http://www.davidreynoldsjewelryandcoin.com/images/estate/rolex_yacht_master.jpg" width="243" height="186" alt="Rolex Watches."><br>
      <span class="caption">Rolex Watches</span><br>

      <img border="0" src="http://www.davidreynoldsjewelryandcoin.com/images/estate/opal_ring.jpg" width="243" height="186" alt="Opals"><br>
      <span class="caption">Opals</span><br>
    </div>
  </div>

标签： htmlcsscross-browser

解决方案

媒体查询最大宽度为 1090 像素。这意味着仅当最大尺寸为 1090 像素宽时才会应用媒体查询。否则，Web 浏览器将忽略媒体查询。解决此问题的一种方法是为不同大小创建多个媒体查询。另一种方法是删除媒体查询。删除媒体查询将使所有样式规则都适用，无论屏幕宽度和高度如何。

推荐阅读