CSS中链接文本为图片时的问题（塌陷、对应的图片建立倒角的问题）

标签：

      我在做Javascript DOM编程艺术的时候，在12章自己做练习时遇到了一个问题，<a>的内容<img>从<a>的盒子中溢出。代码如下：

            <a href="../images/photos/concert.jpg" title="The crowd goes wild">

                <img src="../images/photos/thumbnail_concert.jpg" alt="the band in concert" />
          </a>

   如何解决呢？我只要将a {display:block;}就可以撑起盒子。

  我做了一点修饰，偏褐色的部分是图片盒子。绿色的部分为链接<a>的盒子。但此时图片的下部是无法填满<a>盒子的。我这时将<img>的css设为 img {display:block;},看效果。

 这时<img>就可以铺满这个<a>盒子了，设置 a {display:inline;} 让其可以用inline的方式显示，<a>表现为inline还是block由元素的内容决定。即：<a>内容</a>。一个元素表现为inline的时候会直接缩到内容物的大小。

     有些时候，若一个块级元素中含有许多浮动元素，这时外层的块级元素会塌陷掉。这时使用这样的代码，为方便我已伪代码表示：

blockelement  {width:"size";overflow:auto/hidden};这样就可以撑起盒子了。

   我给我的<img>设置了圆角，但是会发现其实这后面还有边框存在，看起来不协调。

   也就是图中绿色的部分显示了<a>的背景德存在，我可以设置<a>的背景为透明，我也可以给它加个倒角是我看不见。

   可以看到，绿色不见了，当我把背景换为红色时我观察到了外层的边框，但我根本没有设置啊！！！若是其他背景下还不容易看到。而随着我将li显示方式设为inline后，li会直接包含其中的内容，我甚至将li/a等的边框设为0也无济于事，不知问题在哪里。最后我发现是图片外面的虚框啊，只要我将对应的img {outline-width:0px;}就不会出现了。可以参看这篇不错的文章。

CSS中链接文本为图片时的问题（塌陷、对应的图片建立倒角的问题）

标签：

原文地址：http://www.cnblogs.com/hustliliangmin/p/5840467.html