1. 首页
  2. web前端

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

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

<!DOCTYPE html>
<html>
  
  <head>
    <title>max-width:100%不兼容小笔记-练小习</title>
    <style>*{ margin: 0; padding: 0; border:0; } .img-wrap{ display: table; margin: 20px auto; width: 50%; } .img{ display: table-cell; border: 1px solid #cedfea; padding: 10px; } .img img{ max-width: 100%; }</style></head>
  
  <body>
    <div class="img-wrap">
      <div class="img">
        <img class="smallcursor" src="https://mccdn.qcloud.com/static/img/f669eac6b6cd3d333cdf20256aa51eae/image.jpg"></div>
    </div>
  </body>

</html>

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

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

<!DOCTYPE html>
<html>
  
  <head>
    <title>max-width:100%不兼容小笔记-练小习</title>
    <style>*{ margin: 0; padding: 0; border:0; } .img-wrap{ display: table; table-layout: fixed; margin: 20px auto; width: 50%; } .img{ display: table-cell; border: 1px solid #cedfea; padding: 10px; } .img img{ max-width: 100%; }</style></head>
  
  <body>
    <div class="img-wrap">
      <div class="img">
        <img class="smallcursor" src="https://mccdn.qcloud.com/static/img/f669eac6b6cd3d333cdf20256aa51eae/image.jpg"></div>
    </div>
  </body>

</html>

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

原创文章,作者:gxk

本文来自投稿,不代表 怪小克 立场,如若转载,请注明出处:https://wangchaoke.cn/?p=1677

本站发布的内容若侵犯到您的权益,请邮件联系 860095347@qq.com 删除,我们将及时处理!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

860-095-347

在线咨询:点击这里给我发消息

邮件:860095347@@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code