小编D. *_*lsh的帖子

我已经制作了一个1fr 1fr 1fr行的网格模板.在中间行,有一个内嵌图像列表.

在Chrome和Firefox中,图像尊重网格行的高度并正确适应.但是,在Safari 10.1.2和Safari TP 31中,似乎存在溢出行的图像组合而未适当缩放图像宽度.

也许我做错了什么？或者这是一个Safari bug？如果是这样,有解决方法吗？

Safari 10.1

Safari TP

Chrome 60

#grid {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

#thumbnailContainer {
  position: inherit;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

img {
  display: inline;
  height: 100%;
  width: auto;
}

header,
footer {
  background-color: dodgerblue;
}

<div id="grid">
  <header>Header</header>
  <div id="thumbnailContainer">
    <img src="https://c2.staticflickr.com/8/7591/16903911106_b7ced9d758.jpg">
    <img src="https://c1.staticflickr.com/9/8740/16927517701_810fcb2a7c.jpg">
    <img src="https://c2.staticflickr.com/8/7637/16902583636_15138a68f0.jpg">
    <img src="https://c2.staticflickr.com/8/7614/16927530091_6755845b13.jpg">
    <img src="https://c1.staticflickr.com/9/8700/16741099010_d0ecd9df1f.jpg">
    <img src="https://c1.staticflickr.com/9/8745/16927567841_74fd20d01d.jpg">
  </div>
  <footer>Footer</footer>
</div>

https://jsfiddle.net/fqkjhh6m/1/

显然,Chrome扩展程序的API不允许扩展程序读取响应正文.

https://bugs.chromium.org/p/chromium/issues/detail?id=487422

我的扩展需要读取响应主体以从页面获取数据.

我试过了...

  chrome.webRequest.onCompleted.addListener((details) => {
       fetch(details.url)
       .then(res => res.json())
       .then(res => responseFunction(res))
       .catch(err => console.log(err))
    }, { urls: ["*://*.url.com/*"], types: ["xmlhttprequest"] }
  );

但是,这当然是一个无限循环.

我在不同的机器上设置了一个代理服务器,但这看起来很傻,效率很低.

还有其他人解决过这个问题吗？

最基本的问题,但我花了几个小时搜索,找不到答案.

<main style="height:0px;overflow:hidden;">
    <section>
       This should not be displayed
    </section>
</main>

此代码按预期在Safari,Chrome和Firefox中返回空白.但IE10/11显示"不应显示此内容".

https://jsfiddle.net/6a204ad9/8/

显然溢出不起作用.

我已经尝试将高度和宽度设置为main和section.我试过位置:亲戚(IE6 bug).

这是一个非常基本的东西...我知道这是愚蠢的,可能回答10000次,但我的智慧结束了."duh"答案是......？

谢谢!