css - IE 8 不考虑 div 宽度

Question

我正在尝试在宽度为 120 像素的 div 中获取 img 和段落。这适用于 IE10、Firefox 和 Chrome。但不适用于 IE10 之前的浏览器。看起来 IE 不尊重 div 的宽度，这使得段落等元素的宽度为 100%。

我应该在这里更改什么？

.menu {

display:inline-block;
display:-moz-inline-stack;
zoom:1;
*display:inline;

height: 120px;
width: 120px;
cursor: pointer;
margin-top: 10px;
}

.menu a {
    text-decoration: none;
    width: 120px;
}

.menu img {
    width: 100px;
} 

Answer 1

您不能为内联标签设置宽度属性，例如 <a>或 <img> ，除非有强制阻止。

试试这个:

.menu a {
    text-decoration: none;
    width: 120px;
    display: block;
}

.menu img {
    width: 100px;
    display: block;
}

或者(如果你想要在 IE7+ 中工作的内联 block 行为)

.menu a
{
  text-decoration: none;
  width: 120px;
  display: inline-block;
  /* IE 7 HACK */
  *display: inline;
  zoom: 1;
}

.menu img
{
  width: 100px;
  display: inline-block;
  /* IE 7 HACK */
  *display: inline;
  zoom: 1;
}

它会起作用，但是这不是一个好的做法...

为了设置<img>宽度你必须改变 html 宽度属性，这样:

<img src="asd.png" alt="image description" width="100" />