2013-05-15 2 views
0

У меня есть полноэкранное/фоновое слайд-шоу, которое мой клиент любит, что просто терпит неудачу в Internet Explorer 8 и ниже. Я думаю, что пытаюсь исправить это далеко за пределами моих возможностей прямо сейчас, поэтому я просто хотел бы переключить его на другое слайд-шоу с безопасным фоном (менее привлекательным, но, по крайней мере, на чем-то другом), если браузер IE8 или ниже.Возможно ли различное содержание страницы html для разных браузеров?

Однако, я знаю, что вы можете переключать таблицы стилей с помощью

<!--[if IE]> 

и т.д., но таблицы стилей зависит от некоторых основных HTML-разметки в сНу (пример ниже), что я не хочу, чтобы показать на странице в интернет-проводник ...

 <ul class="cb-slideshow"> 
     <li><span>Image 01</span><div><h3>Lorem Ipsum Dolor</h3></div></li> 
     <li><span>Image 02</span><div><h3>Lorem Ipsum Dolor</h3></div></li> 
     <li><span>Image 03</span><div><h3>Lorem Ipsum Dolor</h3></div></li> 
     </ul> 
  • как удалить это, если пользователь использует IE8 или ниже? Я использую mac, поэтому запуск многих тестов в IE невозможен, поэтому я не ленив в запросе.

Должен ли я иметь разные страницы или что-то еще?

Заранее спасибо

+0

В вашем IE8 и менее конкретном файле CSS ' ... ->' вы можете выбрать не отображать содержимое: '.cb-slideshow {display: none; } 'Хотя HTML все равно будет присутствовать, пользователь не сможет его увидеть. Или по какой-то другой причине вам нужно удалить HTML? –

+0

Вот пример с IE6: [Hide when IE6] (http: // stackoverflow.com/questions/6782800/hide-a-specific-div-if-browser-is-ie6) – Flowen

+0

CC можно использовать * в любом месте * в документе, а не только в ''. – cimmanon

ответ

-1

Вы можете определить другое расположение внутри <div id="browserid" style="display:none">...</div> -Tags где BrowserID является одним из IE, FF и т.д., что делает их невидимыми по умолчанию.

Затем вы определяете функцию javscript, которая вызывается в onpageLoad и которая оценивает свойство navigator.userAgent. Это содержит имя браузера клиента. В зависимости от этого значения вы меняете соответствующий стиль отображения.

+0

Блестящий - пинающий себя сейчас :-) Большое спасибо – user2317093

+1

Создание невидимых вещей по умолчанию - это не лучшая практика –

+0

@ScottSimpson: Предоставлено. Но, в этом случае, какая была бы лучшая практика? Я полагаю, вы могли бы сделать запрос ajax на pageload, передав userAgent и получив разметку, возвращаемую некоторым серверным приложением. Но поскольку это не было явно предложено, я опустил его. – LuigiEdlCarno

0

Если использовать условные комментарии, чтобы установить класс по <html> тега вы можете избежать необходимости отдельной таблицы стилей:

<!--[if lt IE 7]> <body class="ie ie6 lte9 lte8 lte7"> <![endif]--> 
<!--[if IE 7]>  <body class="ie ie7 lte9 lte8 lte7"> <![endif]--> 
<!--[if IE 8]>  <body class="ie ie8 lte9 lte8">  <![endif]--> 
<!--[if IE 9]>  <body class="ie ie9 lte9">   <![endif]--> 
<!--[if gt IE 9]> <body class="ie">     <![endif]--> 
<!--[if !IE]><!--> <body>        <!--<![endif]--> 

в ваших стилях только скрыть ул: .lte9 .cb-slideshow { display: none;}

см:

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

и

http://misteroneill.com/journal/improved-internet-explorer-targeting-through-body-classes/

+0

Насколько я понимаю, он не просто хочет изменить стиль, но и полную разметку для каждого браузера. – LuigiEdlCarno

+0

Этот ответ технически * означает * изменение разметки. Условные комментарии не ограничиваются документом '', они также могут использоваться в' '. – cimmanon

+0

Возможно, лучшим решением было бы начать с решения для одного изображения IE8 по умолчанию, а затем добавить другие изображения либо с условными выражениями в теле, либо в javascript. Прогрессивное совершенствование и все такое. –

0

Чтобы развернуть на одном из комментариев, вы можете поставить условные комментарии в любом месте, так что вы можете сделать это:

<!--[if lt IE9]>// IE-specific slideshow HTML here. <![endif]--> 
<!--[if gte IE 9]><!-->// Standard slideshow HTML here (for IE9+ and non-IE browsers) <!--<![endif]--> 
0

Попробуйте это:

<!--[if !LT IE 9]><!--> 
<p>Not IE 8 and below and all other browsers</p> 
<!--<![endif]--> 

<!--[if lt IE 9]> 
<p>IE 8 and below </p> 
<![endif]--> 

Первый блок выходов к все браузеры, кроме IE8 и ниже.
Второй блок выводит на IE8 и ниже.