在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奇怪填充

回答

相關問題