如何CSS沙盒/重置當前頁面中的整個DIV區域？
[英]How to CSS sandbox/reset an entire DIV area in the current page?
問題描述
我們正在開發一個書簽，當書簽加載到不同的網站上時，例如：cnn.com，bbc.co.uk，yahoo.com，它以各種風格顯示，我們很難重置這些樣式。
bookmarklet內容位於當前頁面DOM中，而不是iframe中（因為我們需要cookie並訪問DOM）。
我們嘗試使用CSS重置，但這只重置一些基本的東西，比如邊距。 例如，有一個自定義表單的頁面，或者它繼承的圓形表矩形，它不應該。
有沒有辦法讓我們可以完全隔離當前頁面中的DIV區域，只顯示我們想要的內容？
4 個解決方案
解決方案1
1 2012-07-23 09:37:44
試着用一些不太可能出現在他們頁面上的模糊元素來替換你的div。
例如。 b或者em或i或者甚至是一個較新的html5元素，如果你不喜歡瀏覽器支持。
並將它們設置為display: block功能就像div ，是一個塊元素。
你的結果HTML不會有效或漂亮，但它是一個書簽，所以，嗯。
除此之外，你需要一個非常好的重置。
或者你只需要在造型方面略有不同。
解決方案2
1 已采納 2013-02-10 21:27:43
我們最終使用https://github.com/premasagar/cleanslate
CleanSlate是一個極端的CSS重置樣式表。 它用於將HTML元素及其所有子元素的樣式重置為默認CSS值。 它完全由！important規則組成，它們覆蓋所有其他類型的規則。
解決方案3
0 2012-07-23 09:29:31
好吧，你可以使用唯一的id，然后在每個屬性中添加！important - 用於重置DOM中生成的元素 - 或者你可以在“HTML5”中使用新的scoped屬性。
但這可能會導致該元素或父母的所有顯式“繼承”值樣式出現問題。 例如，相對字體大小也會導致問題。
因此是樣式部分的實驗性范圍屬性，但上次我嘗試它時只有Chrome / Chromium支持它，Firefox最近也可能獲得了對它的支持 - 因為在郵件列表上有一個很大的討論。
http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped
編輯：
另一種解決方案可能是使用默認情況下不在DOM中的自定義元素。 像document.createElement（“thisisfrommyapp”）; 您可以像其他元素一樣設置樣式，但必須應用display：block或者他們想要的任何行為。
此外，IE允許使用它們，但實際上您需要將它們插入Trident的解析器之前。 如果要在HTML中使用它們，則必須在解析DOM之前執行createElement（）（因此它很可能位於文檔的頭部）。
<html>
<head><script>document.createElement('customelement');</script></head>
<body><customelement>is stylable in IE8, too</customelement></body>
</html>
你必須只為Trident做createElement的東西，因為否則你會因為它們的顯示而導致奇怪的解析行為：inline-block默認模型:)
如果您在網站上使用XHTML是出於任何愚蠢的原因（沒有正當理由在HTML上使用XHTML，因為解析器無論如何都要剝離XML標記），您應該為它使用自定義命名空間。
〜干杯
解決方案4
0 2016-02-03 09:54:41
按照以下兩個步驟來沙箱容器。
<div class="namespace-box">
<h1 class="namespace-title">Title</h1>
<p class="namespace-text">Text</p>
</div>
- 取消
all: unset;容器名稱空間的所有屬性，all: unset;只是一個占位符：
[class*="namespace-"],
[class*="namespace-"]:after,
[class*="namespace-"]:before,
[class*="namespace-"]:hover:after,
[class*="namespace-"]:hover:before {
all: unset;
// properties to be unset
}
- 使用Grunt或Gulp任務將屬性選擇器添加到原始CSS。 這會增加級聯並防止未設置的黑客覆蓋：
[class*="namespace-"].namespace-box,
[class*="namespace-"].namespace-title,
[class*="namespace-"].namespace-text {
// original properties
}
您可以使用postcss-increase-specificity任務自動化規范 。
享受防彈容器。
如何僅重置texbox，而不重置整個頁面？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.