这是一个创建于 2357 天前的主题，其中的信息可能已经有所发展或是发生改变。
我们知道，html 中暗藏了一些默认宽高，比如 body 标签默认是 100%的，在里面建立一个 div 标签，他会继承这个 100%，放一个 img 标签，默认是 img 自身大小，如果给 img 加一个 100%的宽度，宽度就是外框的宽度。
今天遇到一个例外，如果外框是绝对定位，这个宽度似乎没了，之前我不知道，不过没问题，我用了 IE 和 chrome 都是这样。
img 自身宽 1200px，高 400px，设定宽度 100%，高度 100px，IE 和 chrome 表现并不一致，IE 中设定宽度无效，实际宽度为依高度缩放后的宽度，1200/(400/100)=300，而 chrome 是 1200，也就是说 chrome 的 100%是按照自身的宽度计算的。
大家怎么看？
今天遇到一个例外，如果外框是绝对定位，这个宽度似乎没了，之前我不知道，不过没问题，我用了 IE 和 chrome 都是这样。
img 自身宽 1200px，高 400px，设定宽度 100%，高度 100px，IE 和 chrome 表现并不一致，IE 中设定宽度无效，实际宽度为依高度缩放后的宽度，1200/(400/100)=300，而 chrome 是 1200，也就是说 chrome 的 100%是按照自身的宽度计算的。
大家怎么看？
 | 1 rabbbit 2019-04-29 05:50:31 +08:00 |
| 2 rabbbit 2019-04-29 06:22:09 +08:00  2 |
 | 3 pinews OP 不太明白，意思是 IE 是对的？ |
 | 4 yushiro 2019-04-29 08:15:24 +08:00 via iPhone 外框绝对定位有宽度吗？如果没设宽度，那 img100%是多宽？ |
| 5 pinews OP @yushiro 原本是外框的外框是设定有宽度的，我原以为外框继承，然后 img 继承，没想到遇到绝对定位中断继承了，这个 100%是因为图片本身的尺寸和我想要的尺寸是一样的，所以我原以为 chrome 是正确的，ie 出 bug 了，现在看来并不是那么回事，所以请教大家的看法 |
| 6 pinews OP 换言之，绝对定位必须显性的声明宽度咯？ |
 | 7 aa1072551507 2019-04-29 09:13:57 +08:00 你父元素都脱离文档流了，子元素怎么可能再去继承文档内的元素？很难理解吗..... |
| 8 yushiro 2019-04-29 09:24:57 +08:00 via iPhone @pinews 看来你对 position 的 absolute，relative，static 这 3 个属性需要再去复习一下。 尽量不要百度查，去 google 上搜 |
 | 9 grewer 2019-04-29 09:25:55 +08:00 子元素也绝对定位试试 |
| 10 rabbbit 2019-04-29 09:47:33 +08:00 无法复现,给个 demo 吧. 如下这个结构在 ie 中是没问题的 <style> img { width: 100%; position: absolute; height: 200px; } </style> <body> <div> <img src="logo.jpg"> </div> </body> |
| 11 pinews OP <!doctype html> <html> <head> </head> <body> <div style="position:absolute;"> <img src="http://toyota.com.cn/mainvisual/ad/32.jpg" style="width:100%;height:100px;" /> </div> </body> </html> |
| 12 pinews OP |
| 13 rabbbit 2019-04-29 10:29:21 +08:00 火狐的表现和 ie 一样,应该是 chrome 的实现不合标准. |
 | 15 b0x 2019-04-29 12:33:48 +08:00 1.不显式声明是 relative 的元素默认是 static. 2.absolute 元素的参照是离他最近的一个 relative 父元素. 如果都不是,则参照是 html. 3. 建议先引入 normalize.css,抹平各浏览器的默认样式差异 |
| 16 aa1072551507 2019-04-29 14:13:50 +08:00 1 @pinews 你外层 DIV 脱离文档，那么他的宽只会显式的继承有相对 /绝对 /flex 定位的父元素或者 body，你父 div 绝对定位之后都没有设置宽度即使以 body 进行参考那宽度也是 0，怎么可能显示出来更不要说子元素 IMG 了？ |
| 17 pinews OP @aa1072551507 body 宽度怎么是？ |
| 18 aa1072551507 2019-04-30 09:16:54 +08:00 @pinews 你想指的是 body 宽度为什么是 0? 我说过了 绝对定位只会显式的继承，跟父元素宽度多少没有干系 |
Select Language