寬度計算返回不正確的值

我試圖計算我的css中的寬度，但它似乎返回錯誤的值。寬度計算返回不正確的值

.item1 { 
    width: -o-calc((50%) - (2px)); 
    width: -moz-calc((50%) - (2px)); 
    width: -webkit-calc((50%) - (2px)); 
    width: calc((50%) - (2px)); 
    background-color: #e4e4e4; 
    float: left; 
    margin-right: 2px; 
}

我也試過如下：

width: calc(50% - 2px); 
width: calc(~"50% - 2px");

他們都返回width: 48%

有人能告訴我什麼，我做錯了。

我測試它的生活和在本地主機上，都有「問題」，我使用，Firefox，Chrome和IE

這就是我得到：

來源

2017-02-16 Peter Hansen

你認爲價值是什麼？ –

當你說它「返回」48％時，你是什麼意思？你在哪裏看到這個？ – Johannes

@fauxserious屏幕的50％ - 可能是屏幕的2px。像50％是20像素，例如和減去2px = 18px –

在我看來，你正在使用某種CSS預處理器（LESS，SASS也許？），它修改了calc的參數。否則下面的語法應該很好地工作：

width: calc(50% - 2px);

但是在更短的，比如你有逃跑的說法，因爲更不是自己的算盤。因此，在LESS這將是：

width: ~"calc(50% - 2px)";

來源

2017-02-16 12:33:47

我認爲什麼是你貼（瀏覽器工具截圖）圖片中顯示的不是你上面貼的CSS規則，而另一條規則：.Frontpage-LeftSide .nyhead.item1

鈣規則通常在瀏覽器工具中顯示，正如它們在CSS中寫入的一樣，而不是計算值。看起來這個規則是覆蓋你的（可能是由於CSS的特殊性）。

PS：如果你正在使用less，你必須寫width: ~'calc(50% - 2px)';（更正：加引號）

來源

2017-02-16 12:38:52 Johannes

下面的代碼在Chrome中工作正常：

width:calc((50% - 2px));

我試圖增加像素值，並且它反映在不是％的像素上。

來源

2017-02-16 12:45:20

寬度計算返回不正確的值

回答

相關問題