chrome bug display flex width 100

用户名

我的页面有一些问题。

查看:https : //user.oc-static.com/upload/2016/12/24/14826126993639_14825671380969_123.png

问题是图像应该完全保持正确,但是当我更改浏览器的分辨率时图像会向左移动。Chrome和Internet Explorer(不是firefox)出现问题

html {
    height: 100%;
    background: black;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
table {
    border: 0;
    padding: 0;
    margin: 0;
}
#container {
    color: white;
    display: flex;
    overflow: hidden;
    height: 100%;
}
#global {
    width: 100%;
    height: 100%
    text-align: center;
}
#table {
    width: 100%;
    height: 100%;
}
#droite {
    height: 100%;
    text-align: right;
}
#image {
    height: 100%;
    display: block;
    width: inherit;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

</head>
 
 
<body>
 
  <div id="container">
 
    <div id="global">
      <table id="table">
        <tbody>
          <tr>
            <td>d</td>
          </tr>
        </tbody>
      </table>
    </div>
 
    <div id="droite">
      <img src="//zagicien.com/test.jpg" alt="" id="image">
    </div>
 
  </div>
 
</body>
 
</html>

用户名

解决方案:删除ID为“ Droite”的div,仅保留图像。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

父项是flex项目时,高度为100%:Chrome bug?

来自分类Dev

IE 10 bug with display table CSS when height is 100%?

来自分类Dev

div高度:100%,显示:flex在Chrome中不起作用

来自分类Dev

在Chrome中显示高度为100%的子元素的Flex

来自分类Dev

div高度:100%,显示:flex在Chrome中不起作用

来自分类Dev

width 属性 - flex 布局

来自分类Dev

CSS + flex +高度100%

来自分类Dev

Flexbox项不包含在最新的Safari和Chrome中(在flex-container上使用max-width,在flex-items上使用flex-basis)

来自分类Dev

为什么ionic设置网格.col`display:block`和`width:100%`属性?

来自分类Dev

display flex在Chrome中的摘要标签上不起作用?

来自分类Dev

即使在Firefox和Chrome中都添加了显示WebKit之后,Display Flex也无法正常工作

来自分类Dev

Display Flex 不适用于 Firefox,但适用于 Chrome

来自分类Dev

display:flex是继承的吗?

来自分类Dev

Chrome DevTools 100%CPU

来自分类Dev

<button>与<span>上的“ display:flex”

来自分类Dev

用display:flex扩展div

来自分类Dev

同时使用display:none和display:flex;

来自分类Dev

反应本机,flex和width父元素

来自分类Dev

flex-item中的图像会忽略最大高度:Chrome和Firefox中的最大高度:100%-(在野生动物园中工作)

来自分类Dev

IE 11在使用flex width时会忽略min-width

来自分类Dev

在Flex 100%高度中使空Div

来自分类Dev

100%的高度溢出了我的Flex布局

来自分类Dev

Chrome 100% 宽度和 100 vw 溢出

来自分类Dev

flex:0 0 100%和flex:1 1 100%之间的差异

来自分类Dev

“ display:table”的高度为100%

来自分类Dev

Place video with 100% height & 100% width using css or javascript

来自分类Dev

在100%width div中向右填充

来自分类Dev

max-width of 100px vs width of 100px ,为什么 max-width 比 width 短?

来自分类Dev

Chrome Only Bootstrap + Google Maps Bug

Related 相关文章

  1. 1

    父项是flex项目时,高度为100%:Chrome bug?

  2. 2

    IE 10 bug with display table CSS when height is 100%?

  3. 3

    div高度:100%,显示:flex在Chrome中不起作用

  4. 4

    在Chrome中显示高度为100%的子元素的Flex

  5. 5

    div高度:100%,显示:flex在Chrome中不起作用

  6. 6

    width 属性 - flex 布局

  7. 7

    CSS + flex +高度100%

  8. 8

    Flexbox项不包含在最新的Safari和Chrome中(在flex-container上使用max-width,在flex-items上使用flex-basis)

  9. 9

    为什么ionic设置网格.col`display:block`和`width:100%`属性?

  10. 10

    display flex在Chrome中的摘要标签上不起作用?

  11. 11

    即使在Firefox和Chrome中都添加了显示WebKit之后,Display Flex也无法正常工作

  12. 12

    Display Flex 不适用于 Firefox,但适用于 Chrome

  13. 13

    display:flex是继承的吗?

  14. 14

    Chrome DevTools 100%CPU

  15. 15

    <button>与<span>上的“ display:flex”

  16. 16

    用display:flex扩展div

  17. 17

    同时使用display:none和display:flex;

  18. 18

    反应本机,flex和width父元素

  19. 19

    flex-item中的图像会忽略最大高度:Chrome和Firefox中的最大高度:100%-(在野生动物园中工作)

  20. 20

    IE 11在使用flex width时会忽略min-width

  21. 21

    在Flex 100%高度中使空Div

  22. 22

    100%的高度溢出了我的Flex布局

  23. 23

    Chrome 100% 宽度和 100 vw 溢出

  24. 24

    flex:0 0 100%和flex:1 1 100%之间的差异

  25. 25

    “ display:table”的高度为100%

  26. 26

    Place video with 100% height & 100% width using css or javascript

  27. 27

    在100%width div中向右填充

  28. 28

    max-width of 100px vs width of 100px ,为什么 max-width 比 width 短?

  29. 29

    Chrome Only Bootstrap + Google Maps Bug

热门标签

归档