css - 图像以 Firefox 为中心,但在 Chrome 上被截断

标签 css google-chrome webkit flexbox

img {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<body style="margin: 0px;">
  <img src="http://i.imgur.com/I3gA11r.jpg">
</body>

在 Firefox 和 Chrome 上尝试该代码时,您将能够使用 Firefox 滚动整个图像,但不能使用 Chrome 滚动整个图像。

CSS 正确还是 chrome/webkit 错误?

最佳答案

尝试这个简单的替代方案:

body { display: flex; }

img { margin: auto; }
<body style="margin: 0px;">
  <img src="http://i.imgur.com/I3gA11r.jpg">
</body>

详细解释参见:Can't scroll to top of flex item that is overflowing container


请注意,所有主流浏览器都支持 Flexbox,except IE 8 & 9 。一些最新的浏览器版本,例如 Safari 8 和 IE10,需要 vendor prefixes 。要快速添加所需的所有前缀,请使用 Autoprefixer 。更多浏览器兼容性详细信息请参阅 this answer .

关于css - 图像以 Firefox 为中心,但在 Chrome 上被截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35532130/

相关文章:

javascript - 在点击功能上动画化图像,同时重叠其兄弟元素

html - 在使用网格布局的 Html 中,当我们的图像少于一行时,如何使最后一个图像左对齐

javascript - 如何添加相当于 .mouseLeave 的触摸

javascript - 如果 Chrome 和 Safari 都使用 Webkit,我是否还需要在它们中测试渲染?

javascript - facebook如何在浏览器地址栏中重写页面的源URL?

css - 如何在ie中 float body

android - @font-face 不适用于 Chrome for Android

javascript - HTML5 应用程序缓存错误事件详细信息

google-chrome - Unicode 字符的有效域名注册

c++ - 如何在 Qt Creator 中编辑 QtWebKit 的右键上下文菜单?