Question

我在CSS文件中写了以下内容。

span.hoverhelp
{
    border:double;
    border-width:3;
    border-color:#000000;
    background-color:#eeffcc;
    padding:5;
    font-size: 11;
    font-family:Verdana, Arial;
    position: absolute;
    top: 80;
    left: 170;
    visibility: hidden;
}

现在，我正在创建一个span并将类hoverhelp应用于它。以下是标签：

<span id="help" class="hoverhelp">
Some text
</span>

当渲染它时，不会应用border-width，padding，font-size，top和left样式。在chrome dev工具栏中打开时，这些值是笔划，左侧出现一个小的黄色警告三角形，上面写着“无效的属性值”。

我可能犯了一个愚蠢的错误。谁能注意到这里有任何陷阱？

Answer 1

CSS长度需要单位。对于大多数人来说，你可能想要px。

使用a validator。

Answer 2

你必须添加单位（例外：0为0）。

您可以选择：

％percentage
in inch
cm厘米
mm毫米
em 1em等于当前的字体大小。
ex ex是字体的x高度
pt point（1 pt与1/72英寸相同）
pc pica（1个与12个点相同）
px像素（计算机屏幕上的一个点）

Answer 3

从CSS中删除visibility: hidden;，并为大多数人添加px。

Answer 4

您在许多地方错过px尝试使用此代码。

span.hoverhelp
{
    border:double;
    border-width:3px;
    border-color:#000000;
    background-color:#eeffcc;
    padding:5px;
    font-size: 11px;
    font-family:Verdana, Arial;
    position: absolute;
    top: 80px;
    left: 170px;
    visibility: hidden;
}

请参阅css验证服务：LINK

Answer 5

那些未应用的值需要在px或em中。所以，基本上，

border-width:3px;
padding:5px;
font-size: 11px;

Answer 6

只是＆＃34;边界＆＃34;不要做它必须是＆＃34; border-style＆＃34;，所以下面会做

span.hoverhelp
{
    border-style:double;
    border-width:3px;
    border-color:#000000;
    background-color:#eeffcc;
    padding:5px;
    font-size: 11px;
    font-family:Verdana, Arial;
    position: absolute;
    top: 80px;
    left: 170px;
    visibility: hidden;
}

但是在默认情况下使它不可见时，它不会被看到。您拥有一个具有相对位置的父元素＆amp;在悬停相同的这个跨度时会出现。

并非所有CSS样式类的属性都适用

6 个答案: