img的宽高无法根据父a元素变化-----内联元素化为块级元素

涉及到块级的商品展示列表显示出现的问题

<span style="white-space:pre">					</span><pre name="code" class="css">.store_list ul
{
list-style: none;
margin: 0;
padding: 0;
}
.store_li
{
width: 22%;
height: 300px;
display: inline-block;
background-color: #fff;
list-style: none;
margin: 0;
padding: 0;
margin: 10px 0 10px 2.2%;
}
.store_li a
{
width: 100%;
height: 200px;
}
.store_img img
{
width: 100%;
height: 100%;
}
.s_title
{

width: 100%;
height: 20px;
color: #222;
}

<li class="store_li"> <a class="store_img" href=""><img src="../image/back.png"></a> <a class="s_title" href="">猪肉羊肉牛肉鸡肉火锅套餐</a></li>

显示的结果：


查了源代码之后发现，a标签并没有如设置的height:200px而显示200px的高度。

分析了一下原因：

因为a元素是内联元素，它是根据文字内容的宽高而变化的，所以宽高都是auto，为其设置宽高之类的具体属性值失效，这里的a元素内包含了一张图片img，图片设置的是宽高继承自父标签（a元素）的宽高，此时图片只能继承祖父标签的宽高咯~

解决办法：

把图片的父标签设为块级元素，也就是将a元素display:block一下。另外设置float属性也可以，因为设置了float浮动属性之后，内联元素就自动被转化成块级元素了。