Problèmes d'affichage sur Safari 5.1.7

Question

climat26

31 Aug 2015 à 15:23

Bonjour,
J'ai fait un site avec Bootstrap 3 et typo3 et qui contient des graphes en svg (version 1.2 tiny).
Quand je regarde ma 1ere page avec Chrome ou Firefox, tout s'affiche bien mais quand je veux la regarder via Safari, je ne vois plus rien, écran vide ???
upload/57750-Sanstitre-.png

Le code HTML de ma page :


<div class="container-fluid">
<div id="logo">
<!--logoEnergie+_2015_vectorise.svg -->
<svg version="1.2" baseProfile="tiny" id="logoEnergie" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 286.074 136.975" xml:space="preserve">
<switch>
  <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
    <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
    </i:pgfRef>
  </foreignObject>
  <g i:extraneous="self">
  ...
</svg>
<!--fin logoEnergie+_2015_vectorise.svg -->
<!--aide.svg -->
<a href="?id=9960">
<?xml version="1.0" encoding="utf-16"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="aide"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	  viewBox="0 0 37.726 37.725" xml:space="preserve">
<g>
	<circle fill="#C8C8AF" cx="18.863" cy="18.863" r="18.863"/>
	...
</g>
</svg>
</a>
<!--fin point interrogation_vectorise.svg -->
  <p>Efficacité énergétique des bâtiments tertiaires</p>
</div><!--logo -->
<div id="decision">  
  <h1>L'AIDE A LA D&Eacute;CISION</h1>
    <div id="decision02">  
<!--gerer.svg -->
<a href="?id=9942">
<?xml version="1.0" encoding="utf-16"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="gerer"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	 viewBox="0 0 121 121" xml:space="preserve">
<g>
	...
</g>
</svg>
</a>
<!--fin gerer.svg -->   
<!--evaluer.svg --> 
<a href="?id=9974">     
     <?xml version="1.0" encoding="utf-16"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="evaluer"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	 viewBox="0 0 121 121" xml:space="preserve">...
</svg>
</a>
<!--fin evaluer.svg -->
<!--ameliorer.svg -->
<a href="?id=9998">
<?xml version="1.0" encoding="utf-16"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="ameliorer"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	 viewBox="0 0 121 121" xml:space="preserve">...
</svg>
</a>
<!--fin ameliorer.svg -->
<!--concevoir.svg -->
<a href="?id=9921">
<?xml version="1.0" encoding="utf-16"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="concevoir"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	 viewBox="0 0 121 121" xml:space="preserve">
<g>
	...
</g>
</svg>

</a>
<!--fin concevoir.svg --> 
  
  </div><!--decision02-->
</div><!--decision -->

<div id="ressources">
  <h1>LES RESSOURCES</h1>

  <!--icone_syst_techniques.svg -->
  <a href="?id=16808">
  <svg version="1.2" baseProfile="tiny" id="techniques" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48.323 48.321" xml:space="preserve">
<switch>
  <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
    <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
    </i:pgfRef>
  </foreignObject>
  <g i:extraneous="self">
   ...
</svg> 
  </a>
  <!--fin icone_syst_techniques.svg -->
  
  <!--icone_theories.svg -->
  <a href="?id=16810">
  <svg version="1.2" baseProfile="tiny" id="theories" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48.323 48.321" xml:space="preserve">
<switch>
  <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
    <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
    </i:pgfRef>
  </foreignObject>...
</svg> 
  </a>
  <!--fin icone_theories.svg -->
  
  <!--icone_calculs.svg -->
  <a href="?id=16807">
  <svg version="1.2" baseProfile="tiny" id="calculs" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48.323 48.322" xml:space="preserve">
<switch>
  <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
    <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
    </i:pgfRef>
  </foreignObject>
  <g i:extraneous="self">
 ...
  <!--fin icone_calculs.svg -->
  
  <!--icone_reglementation.svg -->
  <a href="?id=16811">
  <svg version="1.2" baseProfile="tiny" id="reglementation" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 48.323 48.322" xml:space="preserve">
<switch>
  <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
    <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
    </i:pgfRef>
  </foreignObject>
  <g i:extraneous="self">
   ...
        <g>
          <path fill-rule="evenodd" fill="#DFDFD0"...
</svg> 
  </a>
  <!--fin icone_reglementation.svg -->
  
   <!--icone_cas.svg -->
  <a href="?id=16809">
  <svg version="1.2" baseProfile="tiny" id="cas" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 48.323 48.321" xml:space="preserve">
<switch>
  <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
    <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
    </i:pgfRef>
  </foreignObject>
  <g i:extraneous="self">
    <g>
    ...
</svg> 
  </a>
  <!--fin icone_cas.svg -->
  
   <!--icone_mesures.svg -->
  <a href="?id=16806">
  <svg version="1.2" baseProfile="tiny" id="mesures" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 48.324 48.324" xml:space="preserve">
<switch>
  <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
    <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
    </i:pgfRef>
  </foreignObject>
  <g i:extraneous="self">
 ...
</svg> 
  </a>
  <!--fin icone_mesures.svg -->
  
   <!--icone_donnees.svg -->
  <a href="?id=16812">
  <svg version="1.2" baseProfile="tiny" id="donnees" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48.323 48.324" xml:space="preserve">
<switch>
  <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
    <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
    </i:pgfRef>
  </foreignObject>...
</svg> 
  </a>
  <!--fin icone_donnees.svg -->
  
  <!--icone_glossaire.svg -->
  <a href="?id=15293">
  <svg version="1.2" baseProfile="tiny" id="glossaire" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48.323 48.323" xml:space="preserve">
<switch>
  <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
    <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
    </i:pgfRef>
  </foreignObject>
  <g i:extraneous="self">
  ...
      <g>
     ...
</svg> 
  </a>
  <!--fin icone_glossaire.svg -->

  <p class="hidden-xs"><a href="?id=16808">Techniques</a> - <a href="?id=16810">Théories</a> - <a href="?id=16807">Calculs</a> -<a href="?id=16811"> Réglementations</a> - <a href="?id=16809">&Eacute;tudes de cas</a> - <a href="?id=16806">Mesures</a> - <a href="?id=16812">Données</a> - <a href="?id=15293">Glossaire</a><br>
  </p>
</div><!--ressources -->

<!--contribute --><div id="contribute">
<table width="100%">
<tbody>
<tr> 

<td align="right" width="45%">
<p class="hidden-xs align-right"><!--climat_txt --><div id="climat_txt"><a href="?id=11696"><p class="hidden-xs">Architecture&nbsp;et&nbsp;Climat <br />
Université&nbsp;catholique&nbsp;de&nbsp;Louvain</a></p>
</div> <!--fin climat_txt --></td> 

<td align="center" ><!--climat_logo --><div id="climat_logo">
 <!--Siglclic.svg -->
 <a href="?id=11696">
 <svg version="1.2" baseProfile="tiny" id="climat" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 71.287 71.349" xml:space="preserve" >
<switch>
  <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
    <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
    </i:pgfRef>
  </foreignObject>
  <g i:extraneous="self">
 ...
</svg> <!-- fin Siglclic.svg -->
 </a>
</div>  <!-- fin climat_logo--></td>
 <td width="5%"><div id="dgo_logo">
 <a href="?id=15606">
 <!--dgo.svg -->
 <svg version="1.2" baseProfile="tiny" id="dgo" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 149.856 79.782" xml:space="preserve">
<switch>
  <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
    <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
    </i:pgfRef>
  </foreignObject>
...
</svg> <!-- fin dgo.svg -->
 </a>
</div>  <!-- fin dgo_logo--></td>
 <td width="45%">  <div id="dgo_txt">
<p class="hidden-xs"><a href="?id=15606">Service public de Wallonie - DGO4 <br />
Département de l’Energie et du Bâtiment Durable</a></p></td>
</div>  <!-- fin dgo_txt-->
</td>
</tr>
</tbody>
</table>
</div><!--/contribute -->
</div><!--/container-fluid -->

Le CSS de ma page :


@charset "utf-8";
/* CSS Document */

 body {
  padding-top: 15px !important;
}


.site-wrapper {
  margin-top: 10%;
}

/* logo */  

h1 {
  font-family: 'Shadows Into Light Two', cursive;
  color:#848459;
  font-size:220%;
}

#aide {
  width:35px;
}


  
/* AIDE A LA DECISION */

#decision {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0;
  padding:1px;
  background-color: #CBCBB2;
  width:95%;
  border-radius: 25px 25px 0px 25px;
}

#decision h1 {
  font-family: 'Shadows Into Light Two', cursive;
  color:#686846;
  font-size:220%;
}


#decision02 {
  width:100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
}


#decision svg {
  margin-right: 5px;
  margin-left: 5px;
  width: 80px;
  height: 80px;
}


/* RESSOURCES */  
#ressources {
  margin-top: 2%;
}

#ressources h1 {
  font-family: 'Shadows Into Light Two', cursive;
  color:black;
  font-size:220%;
}

#ressources p a {
  font-family: 'Fjalla One', sans-serif;
  color:#990033;
  font-size: 115%;
}

#ressources a {
  color:#990033;
  text-decoration:none;
}

#ressources svg {
  margin-right: 15px;
  margin-left: 15px;
  width: 40px;
  height: 40px;
}


/* contribute*/

#contribute {
  margin-left: auto;
  margin-right: auto;
}

#contribute p {
    font-size:small;

}

#contribute a {
  color:#848459;
  text-decoration:none;
}

#contribute #climat_txt {
  margin-top: 15px;
}

#contribute #climat_logo {
  width:55px;
}

#contribute #climat {
  width:35px;
}

#contribute #dgo_logo {
  display:inline;
  float:left;
  width:95px;
}

#contribute #dgo {
  width:75px;               
}

#contribute #dgo_txt {
  display:inline;
  float:left;
  text-align:left;
  margin-top: 15px;
}


/* Links */
a,
a:focus,
a:hover {
  color: #CBCBB2;
}

html,
body {
  height: 100%;
  background-color: #DDDDCD !important;
  text-align: center;
}


@media (max-width: 768px) {

#decision h1 {
  font-size: 200% !important;
  }

#ressources h1 {
  font-size: 200% !important;
  }

#decision svg {
  width: 65px;
  }
  
#decision #decision02 svg #Calque_1 {
  height: 70px;
  }
  
#ressources {
  width:auto;
  height: auto;
  }

#ressources svg {
    width: 40px;
    height: auto;
    margin-right: 5px;
    margin-left: 5px;
  }

#ressources p a {
    font-size: 85% !important;
  }
}

@media (max-width: 767px) {
  
#decision h1 {
  font-size: 140% !important;
  }

#ressources h1 {
  font-size: 140% !important;
  }

#logo svg #logoEnergie {
  width: 200px;
  height: auto;
  }
  
#decision #decision02 {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  }

#decision svg {
  width: 70px;
  }

  
#ressources svg {
  width: 40px;
  height: auto;
  margin-left: 5px;
  margin-top: 0;
  margin-right: 5px;
  margin-bottom: 0;
  }
  
#ressources {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  }
}

Merci d'avance pour votre aide.

Sujet clos

CSS et mise en forme, CSS3

Problèmes d'affichage sur Safari 5.1.7