Re: [問題] 防止動態產生之 HTML 元素之樣式被覆蓋

看板Ajax作者 (dalalida)時間10年前 (2014/12/01 00:36), 編輯推噓0(000)
留言0則, 0人參與, 最新討論串2/2 (看更多)
※ 引述《danny0838 (道可道非常道)》之銘言: : 如題,設計 bookmarklet 或 browser extension 時, : 往往會有些透過 javascript 在目前瀏覽的網頁上建立 HTML 元素, : 比如我要設計一個書籤小工具,點擊即建立一個控制選單, : 大概通常會產生 div, table, tr, td, p, span, strong, code : 但這些元素的樣式可能被目前網頁的 CSS 覆寫, : 如有奇葩的 CSS 宣告,比如 span { display: block; } 之類的, : 這些動態產生的元素的樣式往往會被覆寫,造成難以預期的排版破壞。 : 實務上有哪些好方法能把這些動態產生的 HTML 固定為想要的樣式,而不被覆蓋呢? 動態產生的 html如果對版面、位置有要求的話, 我會把產生的 html append在 body最後面, 然後使用絕對定位、絕對大小來控制樣式。 盡量簡化 extension需要的樣式,不要假設有 css reset之類的東西。 ====分隔線==== span { display: block; } 這麼奇葩的樣式我覺得不能算是常見的情況; 如果這是因為網頁原設計人員沒有 sense → 責任不在設計 extension的人 或是因為特殊原因要調整 html tag的預設值(通常是字型啊、顏色之類的設定…) → 我覺得應該要保持一致,設計 extension的人不應該調整 原網頁樣式可以影響到 extension, extension樣式絕對不能影響到原網頁。 : 我知道可以把所有可能的 CSS 樣式值全部寫進 inline style, : 不過這實在是太冗長、太麻煩了orz -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 180.176.94.242 ※ 文章網址: http://www.ptt.cc/bbs/Ajax/M.1417365411.A.ABB.html
文章代碼(AID): #1KUqUZgx (Ajax)
文章代碼(AID): #1KUqUZgx (Ajax)