使用 jQuery 删除全局属性

Question

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

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

由于这些属性没有“无”选项，可以使用 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; // 对其他人一样明智 }

也可以尝试将'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>