最新消息:你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

max-width:100%在td或者table-cell里渲染不符合预期小笔记

表现 练小习 2评论

一直没太注意有这个坑,td或者table-cell的元素里,如果没有指定容器宽度,那么容器里的img标签max-width:100% 在IE7-11,以及firefox下会不理会max-width的限制,例如:

提示:你可以先修改部分代码再运行。

这个demo在IE7-11以及firefox下,img并没有被max控制。

解决的方式,给table设置table-layout: fixed,现在再看这个demo:

提示:你可以先修改部分代码再运行。

因为table-cell默认的automatic是内容决定宽度,IE和FF遵守了这一渲染方式,我们把他改成fixed,列宽由表格宽度和列宽度设定就好了。

转载请注明:练小习的前端技术笔记 » max-width:100%在td或者table-cell里渲染不符合预期小笔记

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. 学习了
    路过11个月前 (07-29)回复
  2. 为小习手动点赞! 😎
    郭大侠12个月前 (07-13)回复