代码之家  ›  专栏  ›  技术社区  ›  Petras

css-在背景图片链接下填充文本链接-为什么?

  •  0
  • Petras  · 技术社区  · 16 年前

    我无法删除此页中链接下的填充 http://www.yart.com.au/stackoverflow/test2.htm

    你可以在这里看到我的问题 http://www.yart.com.au/stackoverflow/blue.png alt text http://www.yart.com.au/stackoverflow/blue.png

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    
    <style type="text/css">
    
    *
    {
      padding:0;
      margin:0;
      font:15px arial;
    }
    
    div
    {
      display:inline;
      height:18px;
      line-height:18px;
      background-color :blue;
    }
    
    .PageMove
    {
      display:inline-block;
      background-image: url(http://www.yart.com.au/stackoverflow/page_move.gif);
      background-repeat:no-repeat;
      width:18px;
      height:18px;
      line-height:18px;
    }
    
    
    .Text
    {
     background-color :red;
     display:inline;
     height:18px;
     line-height:18px;
    }
    
    
    </style>
    </head>
    
    
    <body>
    
    <div><a href="#" class="PageMove"></a><a href="#" class="Text">18 pixels high</a></div>
    
    </body>
    
    </html>
    
    4 回复  |  直到 16 年前
        1
  •  2
  •   Quentin    16 年前

    那些 display: inline-block

    vertical-align: bottom 将元素放置在底部而不是基线上。

        2
  •  0
  •   helle    16 年前

    为什么不用浮子?

    <div style="width: give-it-a-usefull-width">
        <a href="..." id="pageMove" style="float: left;">...</a>
        <a href="..." id="text" style="flaot: left;">...</a>
    </div>
    
        3
  •  0
  •   billyswong    16 年前

    我不知道你的问题到底是从哪里来的但是

    内联元素不能指定为“height”。所以你的 height:18px; 对于“内联” div 将被忽略。

        4
  •  0
  •   Nate Boe    15 年前

    我在一些电子邮件模板上遇到了这个问题。IE和FF没有显示蓝线,但在iphone和android等移动设备上打开的电子邮件显示了蓝线。

    通过chrome浏览器在web电子邮件客户端打开的电子邮件也显示了蓝线。

    我把图像放在牢房中间,解决了这个问题。 align=“中”

    同时将单元格设置为align=“middle”。

    (这会将蓝线放在图像后面并解决问题)

    对于形状不规则的图像(png或gif),您可能需要考虑使用背景色保存图像,或者在白色背景上转换为jpeg。同样,它不是解决这个问题的图像类型,只是删除一个清晰的背景和创建一个实心矩形方块的颜色隐藏线解决了问题。

    内特·布尔