CSS-дизайн в старых браузерах IE

Question

Почему форма и форма меню не отображаются правильно в версиях IE < 11? Страница выглядит нормально в Chrome, IE 11, и т.д.

http://www.kine-stammheim.ch/

Answer 1

сайты взлома одного типа, но работа в другом, как правило, связана с незаконным использованием HTML или CSS. В некоторых браузерах вы можете делать то, что вам не разрешено делать пока что другие не делают.

Используйте w3.org HTML validation service, чтобы найти ошибки на вашем сайте (HTML), вы можете посмотреть ваши результаты here, вы увидите, что у вас есть некоторые ошибки на вашем сайте.

Вы также можете использовать w3.org CSS validation service, чтобы найти ошибки на своем сайте (CSS), вы можете посмотреть ваши результаты here.

Вы увидите, что ваш сайт имеет более 100 ошибок в CSS; это, вероятно, является причиной вашей проблемы. Исправьте свой HTML и CSS, и ваш сайт должен выглядеть просто отлично.

Также проверьте доступные таблицы, чтобы увидеть, какие атрибуты CSS и HTML работают во всех браузерах, а некоторые пока нет.

Вы можете использовать Mozilla Developer Network для проверки совместимости браузеров. Давайте, например, проверим атрибут -moz-, который вы используете в своем CSS;

Browser      Lowest version Support of 
Internet Explorer   ---    --- 
Firefox (Gecko)    1.0 (1.0)   -moz-appearance Not fully supported 
Opera (Presto)    ---    --- 
Safari | Chrome | WebKit 3.0 | 1.0 | 522 -webkit-appearance 

Вы увидите, что у вас будут проблемы с определенными браузерами, такими как Internet Explorer.

Вы также можете проверить таблицу here.

Обратите внимание, что проблемы совместимости в основном связаны с HTML5 и CSS3, которые являются новейшими версиями.

Answer 2

Вполне возможно, что вы используете свойства CSS3, эти свойства не имеют поддержки во всех версиях браузеров, а в некоторых случаях необходимы для специального prefixers ,

Проверить ссылку http://www.w3schools.com/cssref/css3_browsersupport.asp

Например ваш фон, сделанные с помощью CSS имеет этот префиксы:

-webkit-linear-gradient 

-moz-linear-gradient 

-ms-linear-gradient 

-o-linear-gradient 

обзор этого здесь -webkit-линейно-градиент (

Answer 3

вот ваш фон определение #main:

background: -moz-linear-gradient(center top , #DBDBDB, #FFFFFF) repeat scroll 0 0 rgba(0, 0, 0, 0); 

IE не понимают -moz PREfix

вам нужно полное определение для того, чтобы поддержать другие семьи браузера, например:

background: rgb(69,72,77); 
background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); 
background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); 
background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); 
background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); 
background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); 

Посмотрите: https://www.google.de/search?q=vendor+specific+CSS+extensions