使用jQuery删除全局属性

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（这是默认的，旧的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技巧）：

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盒子大小：内容盒子！重要的//为他人着想}

也可以尝试"initial"作为值

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>