表TD寬度爲2px超過指定

我有一個表下面的CSS：表TD寬度爲2px超過指定

width: 100%; 
border-spacing: 0px; 
table-layout: fixed;

然後我有以下類指定3列：

@UsedColumnWidth: 26px; 
@DeleteColumnWidth: 18px; 

.UsedCountColumn { 
    width: @UsedColumnWidth; 
} 
.DeleteColumn { 
    width: @DeleteColumnWidth; 
} 
.CapabilityColumn { 
    /*width: @ContainerWidth - @UsedColumnWidth - @DeleteColumnWidth;*/ 
    /*width: 100px;*/ 
}

鉻看時，我注意到開發人員工具，我的UsedCountColumn和DeleteColumn的寬度比我指定的多了2個像素，我無法弄清楚爲什麼會發生這種情況。我認爲也許border-spacing會搞砸了，但我把它設置爲0.任何有關爲什麼發生這種情況的想法？

來源

2012-12-18 Justin

瘋狂的猜測。你重設你的CSS邊距和填充？否則，如果你可以設置一個像jsfiddle這樣的測試環境，我或其他人可以看看它:) – Daniel

什麼是'@'語法？ – j08691

@ j08691它用於在LESS CSS中聲明變量 –

這就是爲什麼它添加填充而不顯示它。我認爲你使用LESS :)

如果我們在談論「瀏覽器默認的CSS」，那麼確實有一些填充和邊距。

人們製作reset.css文件的原因是因爲瀏覽器具有不同的「默認css值」。

EG。一些瀏覽器有更多的灰色/黃色背景，其他人則完全是白色。

爲了確保更好的佈局，並且在其他瀏覽器中看起來相同，您需要執行css重置。

示例。

* { 
    margin: 0; 
    padding: 0; 
    /* ect styles */ 
}

和OFC ..

總視覺寬度=填充寬度+ +邊界

總填充寬度=填充+餘量+寬度+邊界

同樣適用於高度OFC :)

來源

2012-12-18 16:19:08 Daniel

我希望我的回答是有幫助的，因爲我的評論是; ） – Daniel

我猜這是因爲你有一個1px的邊框，總共添加2px元素。如果是這種情況，您仍然可以保留邊框，但應該添加box-sizing或使用outline。

來源

2012-12-18 16:20:29 Wex

表TD寬度爲2px超過指定

回答

相關問題