Drupal - Zen subtema - Especificar hojas de estilo para navegadores de exploradores no internet

StackOverflow https://stackoverflow.com/questions/1144528

  •  16-09-2019
  •  | 
  •  

Pregunta

En Drupal 6 usando un subtema Zen, nuestra hoja de estilo personalizada es hermosa y perfecta en todas partes, excepto en Internet Explorer 7. Parece ser el :hover Error, donde cualquier enlace al que nos cierne hace que el área de contenido principal salte sobre la barra lateral izquierda (¿se llama colapso de margen o reinicio de margen?).

Intenté establecer min-altura: 1% en todos :hover y elementos de los padres, pero hay muuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuidos finalmente. Lugar dura para los usuarios de Internet Explorer 7.

Sin embargo, en el myspecialsub_theme.info presentar el myspecialsub_theme.css se envía automáticamente a Internet Explorer, por lo tanto, crea el :hover elementos. Necesitamos especificar que Internet Explorer 7 obtenga su CSS específico y todos los demás navegadores obtienen el regular.

conditional-stylesheets[if gt IE 7][all][] = myspecialsub_theme.css
conditional-stylesheets[if IE 7][all][] = ie7specific.css
conditional-stylesheets[if lt IE 7][all][] = myspecialsub_theme.css
conditional-stylesheets[if !IE][all][] = myspecialsub_theme.css

Funciona para las versiones de Internet Explorer, pero Firefox no está obteniendo la hoja de estilo. ¿Por qué no funciona! Es decir, ¿qué debo usar en su lugar?

¿O hay una solución diferente para el problema descrito?

ACTUALIZACIÓN: Mi comentario no se mostró bien a continuación, aquí está la solución que finalmente encontré:

Solución gracias a wikipedia.org/wiki/conditional_comment.

En el subtheme.info:

; stylesheets[all][] = specific_subtheme.css
conditional-stylesheets[if gt IE 7][all][] = specific_subtheme.css
conditional-stylesheets[if IE 7][all][] = ie7specific.css
conditional-stylesheets[if lt IE 7][all][] = specific_subtheme.css

En page.tpl.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">
<head>
    <title><?php print $head_title; ?></title>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <?php print $head; ?>
    <?php print $styles; ?>
    <![if !IE]>
        <link href="/sites/all/themes/specific_subtheme/specific_subtheme.css" rel="stylesheet">
    <![endif]>
    <?php print $scripts; ?>
</head>

Loco ¿eh?

Actualización final: Lo mejor todavía, finalmente descubrí la fuente de :hover Error en el subtema Zen. El Div Main necesita un zoom:1; Y ninguna de estas hojas de estilo condicional es necesario. Pero ahí tienes si no puedes resolver el problema original.

¿Fue útil?

Solución

ACTUALIZACIÓN: Me acabo de dar cuenta de que puedo responder a mis propias preguntas. No busca puntos de reputación, pero desea aclarar la solución correcta para cualquier otra persona que esté investigando esto.

Solución gracias a wikipedia.org/wiki/conditional_comment

En el subtema.info: 

; stylesheets[all][] = specific_subtheme.css
conditional-stylesheets[if gt IE 7][all][] = specific_subtheme.css
conditional-stylesheets[if IE 7][all][] = ie7specific.css
conditional-stylesheets[if lt IE 7][all][] = specific_subtheme.css

En page.tpl.php: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">
<head>
<title><?php print $head_title; ?></title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<?php print $head; ?>
<?php print $styles; ?>
<![if !IE]>
<link href="/sites/all/themes/specific_subtheme/specific_subtheme.css" rel="stylesheet">
<![endif]>
<?php print $scripts; ?>
</head>

Loco ¿eh?

Aaaand por cierto finalmente se corrigió el error del margen de colapso/selector de desplazamiento en IE7, usando el tema Drupal Zen, en IE Pisading 

javascript:alert(content.currentStyle.hasLayout)

En la barra de ubicación y la entrada de ENTER, me diría si el elemento ID = Content haSaplaut (verdadero o falso). Seguí reemplazando el contenido con otros nombres de identificación como Main-Inner, Primary, hasta que descubrí que Main Div era falso. Agregar una propiedad de Zoom: 1; A eso ie7specific.css curó todos los problemas.

Dios bendiga a Microsoft.

Otros consejos

! Es decir, no funcionará como lo entiendo porque solo es decir, es compatible con hojas de estilo condicional.

La forma en que manejo esto es definir las otras cosas de los navegadores en la hoja de estilo principal y anular según sea necesario en los condicionales de IE.

Podrías hacer esto:

 stylesheets[all][] = myspecialsub_theme.css
 conditional-stylesheets[if IE 7][all][] = ie7specific.css

Por supuesto, las cosas específicas de IE deberán hacer un trabajo adicional para anular cualquier cosa que de otra manera no se hubiera importado, pero eso es lo que obtienes por usar IE.

Sus declaraciones de declaración condicionales deben imprimir así:

    <link rel="stylesheet" href="/sites/all/themes/style.css" 
type="text/css" media="screen, projection">
    <!--[if IE 7]>
    <link rel="stylesheet" href="/sites/all/themes/ie7.css" 
type="text/css" media="screen, projection">
    <![endif]-->

Recuerde colocar la etiqueta IE después de su CSS normal para que pueda escribir en exceso los problemas de IE.

Además, no envolvería su hoja de estilo principal en una declaración condicional:

<!--[if !IE]><!-->
<h1>You are NOT using Internet Explorer</h1>
<!--<![endif]-->

Simplemente apunte a IE7 con usted primero arreglar y terminar.

¡Salud!

Como dice Ben, debes intentar anular el :hover selector en ie7specific.css con .selector:hover{property:none}. Asegúrese de que coincida con cada selector y establezca cada propiedad en su valor regular. Si todavía no funciona, creo que una solución más ligera sería escribir esos :hover u otros detalles del explorador no internet en un archivo separado y cargarlos a través de JavaScript después de detectar el navegador. Probar http://docs.jquery.com/utilidades/jquery.support.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top