Question

我试图计算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%

有人可以告诉我我做错了什么。

我正在现场和本地主机上进行测试，两者都存在问题＆＃34;我正在使用Firefox，Chrome和IE

这就是我得到的：

Answer 1

在我看来，你正在使用某种CSS预处理器（LESS，SASS可能？），它修改了calc的参数。否则，以下语法应该可以正常工作：

width: calc(50% - 2px);

然而，在LESS例如，您必须转义参数，因为LESS会自己进行计算。所以在LESS中它将是：

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

Answer 2

我认为您发布的图片中显示的内容（浏览器工具屏幕截图）不是您在上面发布的CSS规则，而是另一条规则：.Frontpage-LeftSide .nyhead.item1

calc规则通常在浏览器工具中显示与CSS中编写的完全相同，而不是计算值。似乎这条规则覆盖了你的规则（可能是由于CSS的特殊性）。

P.S。：如果你使用less，你必须写width: ~'calc(50% - 2px)';（更正：添加引号）

Answer 3

以下代码在chrome中运行良好：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:paddingRight="8dp"
    android:paddingLeft="@dimen/activity_horizontal_margin">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/item_text"
        android:layout_gravity="center_vertical"/>
    <Button
        android:id="@+id/item_button_undo"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="@string/button_undo_text"
        android:layout_gravity="end|center_vertical"
        style="@style/Base.Widget.AppCompat.Button.Borderless"/>
</FrameLayout>

我试图增加px值，它反映在像素上而不是％。

宽度计算返回错误值

3 个答案: