CSS покрытие контента внутри внутреннего html-тега - PullRequest
Новая
       10

CSS покрытие контента внутри внутреннего html-тега

2 голосов
/ 02 декабря 2011

В настоящее время я делаю пользовательский CSS для форума (diskusjon.no), но я боролся с определенной частью страницы.Редактор на форуме IPBoard представляет собой html-тег внутри оригинального html-тега, и мой набор CSS с расширением Стильный не достигает этой части страницы.структура выглядит примерно так: 

<<html> <---lots of tags--> <iframe> <html> <body contenteditable=true>

Теперь мой стиль влияет на все, кроме того, что после второго html-тега, поэтому мой вопрос таков;- возможно ли вообще добраться до этой части страницы, когда я добавляю свой CSS через Стильный.т.е. у меня нет доступа к любому из HTML.

Вот изображение Инспектора Google для части, о которой я говорю:

Ответы [ 2 ]

2 голосов
/ 02 декабря 2011

Поскольку тег <iframe> предназначен для загрузки внешней страницы, он будет иметь свои собственные таблицы стилей. Тогда ваш стиль не может мешать ему.

Решение состоит в том, чтобы использовать javascript после загрузки страницы в iframe. Вы можете обратиться к этому: Как применить CSS к iframe? вопрос.

1 голос
/ 02 декабря 2011

Стильный обрабатывает страницу одинаково, в рамке или нет. Таким образом, решение состоит в том, чтобы стилизовать бит iFramed отдельно.

Например, предположим, что у вас есть страница jsbin.com / osajuz / edit , и она содержит этот iFrame: 

<iframe src="http://www.drudgereport.com/"></iframe>

Тогда вы можете создать стильный стиль, такой как: 

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://jsbin.com/osajuz") {
    body {
        background-color: pink;
    }
}

@-moz-document url("http://www.drudgereport.com/") {
    body {
        background-color: lime !important;
    }
}

который работает.

Если вы создадите стиль и зайдете на jsbin.com / osajuz , вы увидите что-то вроде этого:

iFrame style preview

Аналогичным образом, если во фрейме нет URL-адреса, он обрабатывается как страница из того же домена и URL-адреса, что и содержащая страница. Стильные правила все еще будут применяться.

Например, если вы создаете этот стильный стиль: 

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jsbin.com") {
    body {
        color: orange;
    }
}

@-moz-document url-prefix("http://jsbin.com/abazay/3/edit") {
    body {
        background: lime;
    }
}

, а затем посетите jsbin.com / abazay / 3 / edit # preview , вы увидите оба стиля, примененные к обоим "внутренним" фреймам.

Но обратите внимание , что независимо от того, работает JS, iFrame может переопределять стили CSS, если вы не будете осторожны. Поэтому для борьбы с этой проблемой свободно используйте флаг !important.

...