这是一个创建于 2038 天前的主题，其中的信息可能已经有所发展或是发生改变。
我们知道，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