Question

以下全局属性已添加到页面：

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    box-sizing: border-box;
}

由于这些属性上没有'none'选项，jQuery可用于从页面或div中删除这些属性吗？

更新：

创建我自己的样式表：

* {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
    box-sizing: content-box;
}

并导入它似乎解决了这个问题。

这似乎清除了这些样式所在位置的缓存位置？我不知道这只是IE8问题。

Answer 1

您可以应用content-box（is the default，旧的CSS 2.1行为）：

$("selector for the elements").css({
    "-webkit-box-sizing": "content-box",
    "-moz-box-sizing": "content-box",
    "box-sizing": "content-box"
});

您也可以考虑使用此样式代替border-box（来自CSS-Tricks）：

html {
  box-sizing: border-box;
  /* ...prefixed versions as you see fit...*/
}
*, *:before, *:after {
  box-sizing: inherit;
  /* ...prefixed versions as you see fit...*/
}

如果你这样做，你可以在容器元素上设置content-box，其中的元素都将继承它。在页面上使用专为旧盒子模型设计的小部件时很重要。

Answer 2

最好在自己的样式表中覆盖它。 * { -webkit-box-sizing：content-box！important; //对他人来说很明智 }

也可以尝试初始＆＃39;作为价值

Answer 3

尝试

$("style").each(function(i, el) {  
  $(el).text(function(i, styles) {
    return styles.replace(/border-box/g, "")  
  })
});

$("style").each(function(i, el) {  
  $(el).text(function(i, styles) {
    return styles.replace(/border-box/g, "")  
  })
});

$("*").each(function() {
  console.log(this.style.boxSizing)
})

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    box-sizing: border-box;
}


div {
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>content</div>

使用jQuery删除全局属性

3 个答案: