Как сделать Chrome/Opera определенная таблица стилей?
Обратите внимание, что иногда у вас может быть StackPanel, не осознавая этого. В моем случае у меня был этот код
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Pages}"/>
</ScrollViewer>
, который работал нормально. «Страницы», на которые ссылается привязка, были действительно разными, сложными UserControls, и я хотел иметь только полосы прокрутки для некоторых из них. Поэтому я удалил scrollviewer:
<ItemsControl ItemsSource="{Binding Pages}"/>
И затем я поместил ScrollViewer в качестве верхнего элемента в те элементы usercontrols, где я их хотел. Однако это не сработало. Содержимое просто вышло из страницы. Сначала я не думал, что этот вопрос / ответ может мне помочь, но я понял, что элемент ItemPanel по умолчанию - это StackPanel. Поэтому я решил свою проблему, указав элемент ItemsPanel, который не был StackPanel:
<ItemsControl ItemsSource="{Binding Pages}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
6 ответов
Чистый способ сделать это с помощью javascript: http://rafael.adm.br/css_browser_selector/
. Он рекламирует классы браузера для тега body вашего html, который вы можете используйте в своем CSS как:
.opera #thingie, .chrome #thingie {
do: this;
}
Надеюсь, это поможет.
Избегайте CSS-хаков. Они сломаются.
Google Chrome:
@media not all and (-webkit-min-device-pixel-ratio:0)
{
#example
{
width: 200px;
}
}
Safari:
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#example
{
width: 200px;
}
}
Опера:
@media not screen and (1)
{
#example
{
width: 200px;
}
}
Сделать CSS применимым только для Opera 11?
для Google (и Safari) вы можете просто использовать следующее:
<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />
это загрузит таблицу стилей, специфичную для веб-набора. Тип может быть назван как угодно, но он должен быть включен.
Вы просто создаете свою таблицу стилей по своему усмотрению, и все браузеры, не относящиеся к webkit, просто игнорируют ее.
Вам придется использовать хаки выше для Оперы. Для меня лучше всего подойдет следующее:
@media not screen and (1)
{
#example
{
width: 200px;
}
}
Я использовал его для загрузки объявлений @ font-face, специфичных для браузера.
.ie - Internet Explorer (Все версии)
.ie10 - Internet Explorer 10.x
.ie9 - Internet Explorer 9.x
.ie8 - Интернет Explorer 8.x
.ie7 - Internet Explorer 7.x
.ie6 - Internet Explorer 6.x
.ie5 - Internet Explorer 5.x
.gecko - Firefox (все версии), Camino, SeaMonkey
.ffxx - Firefox xx (изменить xx с номером конкретной версии) new
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (Все версии)
.opera12 - Opera 12. x
.opera11 - Opera 11.x
.opera10 - Opera 10.x
.opera9 - Opera 9.x
.opera8 - Opera 8.x
.konqueror - Konqueror
.webkit - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
.chrome - Google Chrome (все версии)
.chromexx - Chrome xx (изменить xx номером конкретной версии) new
.safari - Safari (все версии ons) new
.iron - SRWare Iron
body {background-color: # 000}
.ie8 body {background-color: # 111} (Специально для Internet Explorer 8 .x)
.win.ie8 body {background-color: # 222} (Специально для Internet Explorer 8.x, для всех версий Microsoft Windows)
.opera body {background-color : # 333} (Opera все версии)
.ff15 body {background-color: # 444} (Специально для Firefox 15.x)
.linux.gecko body {background-color: # 555} (Firefox, Camino, SeaMonkey все версии, для x11 и Linux)
.ie7 #right, .ie7 #left {width: 320px}
Для получения дополнительной информации посетите эту ссылку http://cssbs.altervista.org/
Просто помните, что: «Нюхание агента пользователя - это baaaddd»
Это не так и никогда не будет хорошей практикой.
Это просто боль в заднице, чтобы поддерживать веб-сайт, где реализован сниффинг User-Agent.
Вы должны отдавать предпочтение отдельным таблицам стилей, или CSS-хаки, если они в небольшом количестве или если у вас нет времени на создание нескольких таблиц стилей.
Для Opera вы можете использовать этот трюк:
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
#id {
css rule;
}
}
И, к сожалению, каждый взлом Chrome CSS также применяется к Safari.
Невозможно отделить 2 рендеринга, исключаемых для старых версий Safari (< = safari3, если я хорошо помню)
Я не тестировал это решение, но, согласно этой записи в блоге , вы можете попробовать следующее для Chrome:
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
{
var chromeCss = document.createElement("link");
chromeCss.rel = "stylesheet";
chromeCss.href = "ChromeStyle.css";
document.getElementsByTagName("head")[0].appendChild(chromeCss);
}