8

我有以下一段 javascript/jquery 代码：

 var some_div = $('<div>', {});

 some_div.
    css('position', 'absolute').
    css('width' , '100').
    css('height', '100').
    css('top'   , '100px').
    css('background-color', '#ddf');

 some_div.appendTo('body');

它按预期工作，因为它位于some_div距离身体顶部 100 像素的位置，并将其宽度和高度设置为 100 像素。

如果我将带有top属性的行更改为css('top' , '100').ie 如果我省略了px，那么该框将忽略指定的属性。显然，px需要 top 属性才能生效。

我想知道为什么我不必指定px盒子的宽度和高度。

4

1 回答 1

6

仔细阅读源代码后，它看起来像是一个 jQuery 怪癖，而不是浏览器或 CSS 怪异。jQuery 的 css 函数对您在此函数中提供的值进行大部分预处理。

该函数以各种方式处理某些 CSS 异常和输入异常。一种方法是通过添加“px”将数字转换为字符串。这永远不会适用于您的情况，因为您提供了字符串。

jQuery 还有一组钩子，在将 CSS 值设置到 DOM 节点之前调用它们。您的宽度和高度值在这里被增加，以考虑到IE5.5 的盒子模型和setPositiveNumber().

结论：从您的顶部、底部、左侧、右侧、宽度和高度样式中省略“px”是无效的 CSS。由于 jQuery 正在修改您的属性以支持过时的浏览器和数值，因此您可以通过省略“px”来避免在宽度和高度属性中使用无效的 CSS！

以下将起作用：

css('top' , 100)
于 2012-12-07T11:16:54.550 回答