【问题标题】:CSS: why does setting margin-top only work in Webkit?CSS:为什么设置 margin-top 只在 Webkit 中有效?
【发布时间】:2010-08-15 20:10:53
【问题描述】:

Here is a test case/live example.问题总结:

这仅适用于 WebKit:

Y.one('#container').setStyle('margin-top', 100);

这适用于所有浏览器:

Y.one('#container').setStyle('margin', 100);

为什么设置 margin-top 只在 WebKit 中有效?

编辑:修复如下所示的答案之一。你需要在这里有marginTop,然后它就可以工作了。那么,编辑后的问题是,为什么在这种情况下需要 marginTop 而不是 margin-top?

【问题讨论】:

    标签: css firefox webkit yui


    【解决方案1】:

    如果您访问的是 style 属性,则适用 by the standard 驼峰式大小写。因此,如果 webkit 支持像 element.style["margin-top"] 这样的东西,那就太奇怪了。请记住,这里不是直接处理 CSS,它只是一个中间层。

    简而言之 - marginTopCSS2Properties 接口的一部分,但 margin-top 不是。

    一些库倾向于自动转换属性名称,即 Prototype 将所有连字符的属性名称转换为其驼峰形式,因此您无需担心。

    【讨论】:

    • 我不知道为什么骆驼案是唯一的方法(因为它完全有可能,由 WebKit 证明),至少我没有参考 官方来源。 Flanagan 的 JavaScript Definitive Guide (p. 372) 指出 - 许多 CSS 样式属性,例如 font-family,在其名称中包含连字符。在 JavaScript 中,连字符被解释为减号,因此无法编写像 element.style.font-family = "sans-serif" 这样的表达式 [...] 属性名称是通过删除连字符并在每个连字符后面立即大写字母来形成的。跨度>
    【解决方案2】:

    这在 Firefox 中对我有用:

    <div id="nav">
    <a href='#' onclick='document.getElementById("nav").style.marginTop="25px";'>test</a>
    </div>
    

    【讨论】:

    • 我也可以确认IE。
    • 这几乎是答案。我还想要一些 W3C 参考或指向这个 marginTop 与 margin-top 的东西。任何人? :)
    • w3schools.com/css/pr_margin-top.asp 向下滚动,它告诉您使用 javascript 作为 "object.style.marginTop="10px" 访问
    • 我明白,但这并没有解释根本原因,为什么内联语法需要 marginTop 而不是 margin-top (特别是如果你按照我展示的方式设置它,所以你不是受不能有破折号的 JS 变量名约束)。
    • 太棒了,很高兴我能回答你的问题,但没有得到花时间为你回答的荣誉。干杯。
    【解决方案3】:

    它必须是marginTop,因为您没有在 CSS 文件中设置 CSS 属性。您正在设置style 对象的marginTop 属性。 - 是标识符的无效字符。

    【讨论】:

    • 那么剩下的唯一谜团是,为什么它与 Webkit 一起工作?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-23
    • 1970-01-01
    • 2010-09-22
    • 2020-05-11
    相关资源
    最近更新 更多