在IE 9中使用框大小调整边框框和最小宽度的问题 [英] Issue with box-sizing border-box and min-width in IE 9

问题描述

我使用的是 box-sizing：border-box 模型。当最小宽度的 inline-block 元素包含在 inline-block 元素（容器）中时，容器太宽Internet Explorer 9.按预期在FF 10.0，Chrome 17.0，Opera 11.5和Safari 5.1.2中运行。

请参阅此jsfiddle

顺便说一下，宽度

解决方案

任何想法？嗨遇到了你的帖子当谷歌IE 8类似的问题，虽然IE 8支持box-sizing和最小高度/宽度，从我的测试，似乎IE 8忽略边框的使用min-height /宽度相同的元素

例如

  #box {
 min -height：20px; 
 padding：4px; 
 box-sizing：border-box; 
} 
  

IE 8 height = 28px， Chrome 20 height = 20px;

使用css浏览器选择器的解决方案 http://rafael.adm.br/css_browser_selector /

  #box {
 min-height：20px; 
 padding：4px; 
 box-sizing：border-box; 
} 
 
 .ie8 #box，.ie9 #box {
 min-height：12px; 
 padding：4px; 
 
} 
  

I'm using the box-sizing:border-box model. When an inline-block element with a min-width is contained in an inline-block element (container), the container is too wide in Internet Explorer 9. Works as expected in FF 10.0, Chrome 17.0, Opera 11.5 and Safari 5.1.2.

See this jsfiddle

By the way, width instead of min-width works like a charm.

Any ideas?

解决方案

Hi came across your post when Googling for a similar issue with IE 8, although IE 8 supports box-sizing and min-height/width, from my tests, it seems IE 8 ignores border-box when using min-height/width on the same element

E.g.

#box {
   min-height: 20px;
   padding:4px;
   box-sizing:border-box;
}

IE 8 height = 28px, Chrome 20 height = 20px;

Solution using css browser selectors http://rafael.adm.br/css_browser_selector/

#box {
       min-height: 20px;
       padding:4px;
       box-sizing:border-box;
  }

 .ie8 #box, .ie9 #box {
       min-height: 12px;
       padding:4px;

 }

这篇关于在IE 9中使用框大小调整边框框和最小宽度的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！