新手问题 IE 用了 bootstrap 后的图片尺寸问题

lentg · 2012年12月13日 · 最后由 stfei 回复于 2013年04月11日 · 9291 次阅读

为什么用了 bootstrap 后,我的网页在 IE 下图片的尺寸更改无效啊,能帮我解答一下吗?页面:http://106.187.101.190/en/lights/f1018

logo`

设下图片 css 的 width 和 height 试试?

#1 楼 @luikore 这是 kindeditor 上传进来的图片,尺寸不一,css 里是能锁定大小,可是不适合在这里使用。

写个 js 把上传图片都加上和 width, height 属性一致的 css 宽高...

#1 楼 @luikore 呃,有这么麻烦的?而且每次都运行 JS 也不是办法啊?

你图片的 width 和 height 属性是怎么赋进去的,就怎么样把 css 弄进去也可以... 加个 style 属性之类的...

那是在 KindEditor 里插入图片,填写属性,如果写 style,那就要在 html code 里添加,如果图片多的话,一个个地添加修改也不好啊。是不是某个地方出问题才会这样的啊?可是在百度 GG 上都没找到对应的。

#5 楼 @luikore 用 bootstrap 后,在 IE 里 img 标签 width & height 失效 是怎么回事啊?应该怎么解决?帮帮忙啊

@lentg 我只知道傻办法:写个 js 把 width 和 height 改成 css... 像这样:

$('#xxx img[width]').each(function(){
  $(this).css({
    width: $(this).attr('width'),
    height: $(this).attr('height')
  })
})

猜测根本原因可能是没按 bootstrap 的方式处理 class 和 id ? 建议完整看看 bootstrap 的文档...

@lentg 我在 Firebug 里看了没有发现 CSS 里有控制图片宽高的样式, 只有这个

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

另外 8 楼的方式法也不行吗?

#8 楼 @luikore #9 楼 @fresh_fish 现在在家里,没办法试验,家里本本的 Win 没配置 Rails 环境,linux 没配置 IE 相关,明天看看,总觉得用 JS 控制不是很理想。

#9 楼 @fresh_fish #8 楼 @luikore 我知道问题所在了,就是 Bootstrap 里的这条规则,

img {
  /* Responsive images (ensure images don't scale beyond their parents) */
  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */
  width: auto\9;  /*问题就出现在这行规则上,删除了就好的*/
  /* IE7-8 need help adjusting responsive images */
  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

img{width: auto\9;},请问如果不删除这规则,要怎么覆盖呢?

.details img{
  width: ????;
}

我也碰到这个问题了,不知道为什么 bootstrap 要改写这个,在要覆盖的页面上写上 css。

img{ width:inherit; height:inherit; }

或者为这个具体的图片 ID 样色写上具体的 px 大小 必须在 bootstrap 的 css 后面写才会有覆盖效果。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号