Question

我正在尝试使用raphaeljs在svg按钮上创建jqueryui图标。我已经成功删除了jqueryui添加的大量填充，但Raphael paper下面还有一个额外的5像素边框，我似乎无法弄清楚。我正在使用Chrome的开发工具来识别问题，这有助于我找出<span>添加了我必须删除的填充。但是我被困在div下方5个像素的位置......

三个问题：
1）这些额外像素的来源是什么？ 2）如何摆脱它？
3）如何在不依赖StackOverflow优秀人才的情况下解决这个问题？

代码（jsfiddle）:(尝试创建一个仅包含Raphael纸张（20x20像素）作为内容的按钮。）
HTML：

<div>
    <input type="radio" id="button">
    <label for="button">
        <div id="labeldiv"></div>
    </label>
</div>

使用Javascript：

$('#button').button();
var paper=Raphael('labeldiv',20,20);
paper.circle(10,10,10);
$('#labeldiv').parent().css('padding','0px');

（按照上面的链接获取paper以下额外5个像素的结果

Answer 1

由于line-height:normal被应用于svg容器div#labeldiv。尝试将其设置为line-height:1em或更低，如果有必要

Answer 2

修复labeldiv的高度：

$('#labeldiv').css('height','20px');

带有raphael图标的jqueryui按钮：额外（填充？）像素来自哪里？

2 个答案: