2012-12-10 105 views
0

我目前正在建立一個小型廣告網絡,主要用於在我們自己的網站上使用。防止元素被CSS操縱

的廣告是由包括網站,就像在一個腳本加載中...

<script src="http://someurl.com/somejs.js"></script> 

無論我把腳本行,它的獲取與廣告內容所取代,裏面帶有內嵌樣式。 一定的廣告將是HTML,而這正是困擾我...

例如,讓我們假裝廣告內容是一樣的東西

<div style="height: 150px; width: 90px; overflow: hidden; display: inline-block;"><p>Buy cheap buttons</p><p><img src="deliciousButtons.png" /></p></div> 

,然後讓假裝內容加載到網頁,如果有人在他的樣式表如下:

img { border: 1px solid red; } 

現在在廣告中的形象得到一個紅色邊框 - 無賴。

我唯一的解決方案是使用iframe ......但是,我從來沒有真正喜歡iframe。

是否有html元素,您可以在其中放置HTML,並且放置在裏面的所有內容都不受任何樣式表偏好的影響 - 只有內聯樣式?

...如果沒有。有關如何做的建議?沒有內置頁框:)

+2

這聽起來像你想[影子DOM(http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/)。 (具體參見標題爲「用CSS延伸到陰影中的一節:」另一個技巧是控制CSS如何進入陰影子樹的能力。「)**很遺憾**,因爲陰影DOM還沒有標準化或實現,你堅持使用iframe。 – apsillers

+0

你描述你想要什麼,它恰恰是一個iframe。然後你說你不想使用iframe。所以你想要的是一個iframe,而不是一個iframe。這個練習的重點是什麼? – Chuck

+0

apsillers:該死的權利,這就是我想要的......但是,現在我會讓每個廣告都帶有自己的封裝,並帶有唯一的ID(例如id =「someName-adID- * datetime *」),然後我的腳本會向附加一個樣式標籤,然後它會將CSS重置爲特定唯一包裝的子元素的所有元素。從這一點開始,內聯樣式控制元素。 – EibergDK

回答

2

你可以覆蓋繼承的樣式,但爲了能夠正常工作,你將需要執行每一個可能的CSS選項,並且可能會標記這樣的覆蓋!重要的是,iframes是最好的方法來完成那另一種可能是使用靜態圖像或閃光燈,但我想這也是可能的選擇。

1

你可以做如下的事情。
添加一個你不想要的風格的類。

<img src="deliciousButtons.png" class="no-border"/>

然後在你的CSS。

img:not(.no-border) { 
    border: 1px solid red; 
} 

demo

+0

在這種情況下,我不能依賴於訪問樣式表,因此跳過特定的類不是一個選項 - 它也可以被輕鬆操縱。 Shadow DOM就是我正在尋找的東西,不過看起來我現在必須使用一種解決方法(但這不是它)。 – EibergDK