[SOLUCIONADO] Calc no me funciona en Opera ni Safari

[mblascog]

Buenas,
Estoy comprobando la web y me he dado cuenta, que la función calc de css no se ejecuta en Safari ni Opera, en cambio, funciona perfecto en Chrome, Internet Explorer i Firefox.

El cálculo es: 100% - 108px. Esto da 916píxeles (1024-108), pero en Safari y Opera da 930píxeles, por lo que la imagen no aparece

El codigo CSS es este:

Código CSS:

header {
    width:100%;
    float:left;
}
#capcalera {
    width:100%;
    height:130px;
    background:#FFFCD8;
    float:left;
    padding-left:0%;
    padding-right:0;
    padding-top:1%;
    font-size:.9em;
}
#capcalera div#capEsquerra{
    float:left;
    height:100%;
    width:-moz-calc(100% - 108px);
    width:-webkit-calc(100% - 108px);
    width:-o-calc(100% - 108px);
    width:calc(100% - 108px);
}
#capcalera div#capEsquerra a{
    width:100%;
}
#capcalera div#capEsquerra a img{
    float:left;margin-bottom:1%;margin-left:1%;
}
#capcalera div#capDreta{
    float:right;
    width:108px;
}
#menu {
    float:left;
    width:100%;
    background:#99b59f;
}
#menu nav {
    font:bold 1em 'Helvetica';
    padding-top:2px;
    width:100%;
}
#menu nav ul {
    list-style-type:none;
    background:#367A7B;
}
#menu nav ul li#opcioActiva{
    background:#668f6f;
    color:#FFFCD8;
}
#menu nav ul li {
    float:left;
    background:#99b59f;
    line-height:40px;
    width:23%;
    min-width:160px;
    text-align:center;
    vertical-align:middle;
    border-right:1px solid white;
}
#menu nav ul li a{
    text-decoration:none;
    color:#FFFCD8;
}
#menu nav ul li a:hover{
    font:bold 1em 'Helvetica';
    color:#668f6f;
}
#menu nav ul li#bandera{
    border:0;
    min-width:50px;
    width:8%;
}
#menu nav ul li#bandera a{
    width:100%;
}
#menu nav ul li#bandera a img{float:none;
    margin:0 auto;
    vertical-align:middle;
}
 

Se puede ver un ejemplo :aquí

Muchas gracias.

[pzin]

En Safari me funciona bien. Obviamente en Safari para Windows es de suponer que no funcione, porque Apple ya no saca versiones para ese SO —hace tres versiones creo.

Y mirando en Opera (en OSX) veo que también funciona.

[mblascog]

Gracias pzin,
Yo he probado con Safari para Windows, por tu comentario, creo entender que no hace falta que lo haga.
En Opera te sale la foto de la fechada arriba, a a mano derecha? En Opera para PC, no

Por cierto, con qué navegadores pruebas tu que la web se vea bien?

Gracias

[mblascog]

Además lo acabo de probar con IE8 y se ve todo desordenado.
Supongo que debería de usar algún emulador de CSS3 para que funcione con las antiguas versiones de IE. Me aconsejais alguno en especial?

Gracias.

[pzin]

Iniciado por mblascog

Yo he probado con Safari para Windows, por tu comentario, creo entender que no hace falta que lo haga.

Si usara Windows yo no lo haría. Después de todo Safari donde se usa es en OSX y en iOS.

Iniciado por mblascog

En Opera te sale la foto de la fechada arriba, a a mano derecha? En Opera para PC, no

Si. Ayer al menos, hoy no sale nada. De todas formas fíjate en el enlace de abajo que tu versión soporte eso.

Iniciado por mblascog

Por cierto, con qué navegadores pruebas tu que la web se vea bien?

Generalmente me vale que funcione en Chrome, Safari y Firefox. No tengo instalado IE, porque no puedo, pero si tuviera, probaría que se vea bien a partir de IE10. Aunque a mi no me hagas mucho casi que soy muy radical con eso.

Iniciado por mblascog

Además lo acabo de probar con IE8 y se ve todo desordenado.

Claro, no está soportado calc() en IE8: http://caniuse.com/calc

Como digo yo personalmente no me preocuparía mucho de IE8. Si aún así quieres hacerlo, supongo que usar comentarios condicionales, y dentro de ahí hacer una llamada a un fichero JavaScript que calcule el ancho de ese elemento.

[mblascog]

Gracias pzin, me son de mucha utililidad tus comentarios.
La verdad es que sería más fácil partir de IE10, pero la verdad, creo que gran parte de los usuarios aún usan IE8, porqué aún hay muchos Windows XP activos, así que me quedo más tranquila que también se vea bien.