Совместимость с Css/браузером/joomla

Question

Извините, если раньше это был ответ, но я действительно мог бы сделать конкретный ответ на определенный набор обстоятельств. Я очень новичок в чем-то, кроме базового css.

Лучший способ описать, что я имею в виду, - это посмотреть на сайт в разных браузерах. http://www.livingwithaddicts.com/ .

Я собрал это вместе для благотворительной деятельности с использованием Joomla CMS (версия2.5).

Если вы посмотрите на сайт в Firefox, он как (пока он еще не закончен), как он должен выглядеть. Это хорошо в Chrome и проходим отдельно от некоторых легко решаемых проблем с позиционированием в Opera.

Затем мы добираемся до IE, и я только что добавил background: # 485fc5;, чтобы заставить его отображать частично, как я хотел, и сделаем то же самое, чтобы получить bg на формах.

Я хотел бы изучить некоторые другие способы стилизации, чтобы он выглядел приемлемым в IE. Я не хочу идти по пути замены градиентов или текстового теневого копирования графикой.

Есть ли у вас набор CSS, который вызывается только в том случае, если кто-то смотрит в IE? Если да, то как я могу это сделать? Это то, что известно как взлом?

Другие возможности заключаются в том, что, поскольку я использую Joomla, мне пришлось вложить некоторые встроенные стили в определенный контент, и я думаю, что некоторые из сгенерированного кода могут быть либо развратными, либо/или немного грязными. Это повлияет на то, как это проявляется.

Также я поспешно (лениво) c & написал кусок css и изменил шестнадцатеричные значения, чтобы включить его в мой существующий css. (Чтобы кто-то теперь вздыхал с неодобрением, я извиняюсь) Это может быть не до синтаксис даты, и я только слышал о webkit на днях, так что я начинаю.

Я вставляю его здесь и, надеюсь, не смущаю себя. Если кто-то хочет взглянуть (или рассмеяться), пожалуйста, сделайте это. Я был бы очень признателен за любые советы. Вот код.

body { 
    background: #485fc5;  
    background-image: linear-gradient(bottom, #485fc5 13%, #6e86ee 57%, #a0b0f5 79%); 
    background-image: -o-linear-gradient(bottom, #485fc5 13%, #6e86ee 57%, #a0b0f5 79%); 
    background-image: -moz-linear-gradient(bottom, #485fc5 13%,#6e86ee 57%, #a0b0f5 79%); 
    background-image: -webkit-linear-gradient(bottom, #485fc5 13%,#6e86ee 57%, #a0b0f5 79%); 
    background-image: -ms-linear-gradient(bottom, #485fc5 13%, #6e86ee 57%, #a0b0f5 79%); 
    background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.13, #485fc5), 
    color-stop(0.57, #6e86ee), 
    color-stop(0.79, #a0b0f5)); 
} 

Answer 1

Это не конкретный ответ на ваш вопрос, но он должен помочь вам на вашем пути.

Для целевых браузеров, которые не поддерживают определенные функции, используйте Modernizr. Он не позволит вам специально настроить IE, но он добавляет классы в тег body, которые указывают, поддерживаются ли определенные свойства. Затем вы можете настроить таргетинг тех, используя тот класс следующим образом:

/* target browsers that don't support gradients */ 
.no-cssgradients { 
    background-image: url(some-gradient-image); 
} 

/* a randomly chosen element on a page that doesn't support border radius */ 
.no-cssborderradius #some-element { 
    border: 1px solid red; 
} 

Таким образом, вы можете не только целевой IE, но и другие браузеры, которые не могут обрабатывать градиенты, радиус или десятки других свойств CSS.

Кроме того, для простых градиентов, радиуса границы и теней окна вы можете использовать CSS3 PIE, что позволит вам использовать эти функции в IE (6 и выше).