在DIV奇怪填充

灰色边框应该是不可见，它应该由黑色边框覆盖，我不明白为什么它不会......这里的CSS代码：

#portrait{ 
    width:120px; 
    height:100px; 
    top:20px; 
    border: solid black 1px; 
    margin: 0px; 
    padding: 0px; 
    cursor:pointer; 
} 

#prof_picture{ 
    width: inherit; 
    height: inherit; 
    border: none; 
}

HTML（在表内）：

<td id="portrait"> 
    <img id="prof_picture"></img> 
</td>

和的JavaScript

$("#prof_picture").attr('src',"profile/loading.gif");

我不得不做出的DOM，因为使用了JavaScript线上的图像会承担其自然的宽度和高度时，继承属性的一部分，我希望它只是适合肖像。当我这样做时，奇怪的边框出现了。你知道为什么吗？

来源

2013-12-19 user111671

你可以在小提琴上发布完整的源代码吗？你是否检查了表格上的cellpadding，cellspacing和border属性？ –

小心这个jsfiddle我为你开始了吗？ http://jsfiddle.net/CyV7j/ – dyln

更新@dylan JSFiddle包括jQuery：http：//jsfiddle.net/CyV7j/1/ – ZenMaster

它在小提琴http://jsfiddle.net/CyV7j/6/

上有#profile修复设置line-height: 0;，font-size: 0;或display: inline;由于内联元素（行img）在表行内部呈现，所以在img元素周围添加了4px的额外空间。

请考虑类而不是id的样式。并限制表格使用表格数据，而不是照片布局。

来源

2013-12-19 23:00:53 dyln

添加font-size: 0;到#portrait {}

来源

2013-12-19 22:46:25 TunaMaxx

尝试设置你的形象，成为一个块级元素：

#prof_picture { display:block; }

另外，您可以将其设置为对齐底部（将工作仅当它的内联（或内嵌块）元素），但我认为可能会有这种情况或环境可能会产生不需要的结果。

#prof_picture { vertical-align: bottom; }

默认情况下（除非另有指定），图像是内嵌元素。大多数浏览器会在这里预留一些额外的空间，但是您也可以通过将父母的line-height设置为零来解决此问题。

#portrait{ 
    line-height: 0; 
}

来源

2013-12-19 22:46:28 SquareCat

我建议你摆脱边界：无;通过#prof_picture。您还可以尝试在#portrait li上写上边框

border: 1px solid black;

因为这是写入边框的正确方法。

来源

2013-12-19 22:48:24

如果您正在使用某些浏览器....你需要设置在CSS：

img{ 
    outline:none; 
}

来源

2013-12-19 22:54:28 Andrew

在DIV奇怪填充

回答

相关问题