Tema: Problemas con CSS y !DOCTYPE
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 04/05/2011, 12:19
Avatar de ThomaGutierrez
ThomaGutierrez
 
Fecha de Ingreso: enero-2011
Mensajes: 33
Antigüedad: 13 años, 10 meses
Puntos: 2
Respuesta: Problemas con CSS y !DOCTYPE
Me Sucede Lo Mismo!

Pero se puede usar de manera que identifique el navegador y lo redirija a una pagina diseñada para tal [Navegador]

Asi que vamos por pasos:

1) Crear 3 documentos ie.html, chrome.html y el index.html.
2)EN INDEX.HTML:

Código HTML: 
Ver original
  1. <html> 
  2. <head> 
  3.    <script language="Javascript"> 
  4.  
  5. //detección del navegador por http://www.quirksmode.org/js/detect.html 
  6.  
  7. var BrowserDetect = {
  8.     init: function () {
  9.         this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
  10.         this.version = this.searchVersion(navigator.userAgent)
  11.             || this.searchVersion(navigator.appVersion)
  12.             || "an unknown version";
  13.         this.OS = this.searchString(this.dataOS) || "an unknown OS";
  14.     },
  15.     searchString: function (data) {
  16.         for (var i=0;i<data.length;i++) {
  17.             var dataString = data[i].string;
  18.             var dataProp = data[i].prop;
  19.             this.versionSearchString = data[i].versionSearch || data[i].identity;
  20.             if (dataString) {
  21.                 if (dataString.indexOf(data[i].subString) != -1)
  22.                     return data[i].identity;
  23.             }
  24.             else if (dataProp)
  25.                 return data[i].identity;
  26.         }
  27.     },
  28.     searchVersion: function (dataString) {
  29.         var index = dataString.indexOf(this.versionSearchString);
  30.         if (index == -1) return;
  31.         return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
  32.     },
  33.     dataBrowser: [
  34.         {
  35.             string: navigator.userAgent,
  36.             subString: "Chrome",
  37.             identity: "Chrome"
  38.         },
  39.         {   string: navigator.userAgent,
  40.             subString: "OmniWeb",
  41.             versionSearch: "OmniWeb/",
  42.             identity: "OmniWeb"
  43.         },
  44.         {
  45.             string: navigator.vendor,
  46.             subString: "Apple",
  47.             identity: "Safari",
  48.             versionSearch: "Version"
  49.         },
  50.         {
  51.             prop: window.opera,
  52.             identity: "Opera"
  53.         },
  54.         {
  55.             string: navigator.vendor,
  56.             subString: "iCab",
  57.             identity: "iCab"
  58.         },
  59.         {
  60.             string: navigator.vendor,
  61.             subString: "KDE",
  62.             identity: "Konqueror"
  63.         },
  64.         {
  65.             string: navigator.userAgent,
  66.             subString: "Firefox",
  67.             identity: "Firefox"
  68.         },
  69.         {
  70.             string: navigator.vendor,
  71.             subString: "Camino",
  72.             identity: "Camino"
  73.         },
  74.         {       // for newer Netscapes (6+)
  75.             string: navigator.userAgent,
  76.             subString: "Netscape",
  77.             identity: "Netscape"
  78.         },
  79.         {
  80.             string: navigator.userAgent,
  81.             subString: "MSIE",
  82.             identity: "Explorer",
  83.             versionSearch: "MSIE"
  84.         },
  85.         {
  86.             string: navigator.userAgent,
  87.             subString: "Gecko",
  88.             identity: "Mozilla",
  89.             versionSearch: "rv"
  90.         },
  91.         {       // for older Netscapes (4-)
  92.             string: navigator.userAgent,
  93.             subString: "Mozilla",
  94.             identity: "Netscape",
  95.             versionSearch: "Mozilla"
  96.         }
  97.     ],
  98.     dataOS : [
  99.         {
  100.             string: navigator.platform,
  101.             subString: "Win",
  102.             identity: "Windows"
  103.         },
  104.         {
  105.             string: navigator.platform,
  106.             subString: "Mac",
  107.             identity: "Mac"
  108.         },
  109.         {
  110.                string: navigator.userAgent,
  111.                subString: "iPhone",
  112.                identity: "iPhone/iPod"
  113.         },
  114.         {
  115.             string: navigator.platform,
  116.             subString: "Linux",
  117.             identity: "Linux"
  118.         }
  119.     ]
  120.  
  121. };
  122. BrowserDetect.init();
  123.  
  124. //script para poner estilos distintos para cada navegador 
  125. if (BrowserDetect.browser == "Chrome") { 
  126.     document.write("<meta http-equiv='Refresh' content='0;url=chrome.html'>"); 
  127. } 
  128. else { 
  129.     if (BrowserDetect.browser == "NothingNavigator"){  
  130.                  document.write("<meta http-equiv='Refresh' content='0;url=ie.html'>"); 
  131.              }else{ 
  132.                  document.write("<meta http-equiv='Refresh' content='0;url=ie.html'>"); 
  133.              } 
  134. }
  135. </script> 
  136. </head> 
  137. <body> 
  138.  
  139. </body> 
  140. </html>
Este Anterior lo pegas en el index.html de manera que cuando entres en el te redirrecione a una de las siguientes paginas:
Codigo PARA IE.HTML [Valido También para Firefox]
Código HTML: 
Ver original

Finalmente PARA CHROME.HTML
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head></head>
  4. <body>
  5. </body>
  6. </html>
Listo eso es todo; Simplemente haces las dos paginas con y sin el DOCTYPE, y el index que lo redirrecciona según el navegador.

NOTA: Es Obligatorio que lleven por nombre chrome.html y ie.html.