Bonjour,
J'ai un curieux problème avec Chrome, je l'ai isolé dans ce HTML simple :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
	<title>Untitled</title>
  <script ID="debugScript" src="/commun/debug/debug.js" type="text/javascript"></script>  
  <STYLE>
  span.tableau {
  display:inline-block; margin:0!important; padding:0 !important;
  border: 30px solid transparent; 
  border-image: 
  url("https://accropedia.com/pictureFrames/tableau2.png") 23 round;
  }
  </STYLE>
</head>
<body>
<span class="tableau"><IMG SRC="https://accropedia.com/photos/0004/010710.jpg" width=300 BORDER="0" ALT=""></span>
</body>
<SCRIPT>
  var sheet = document.styleSheets[0];
  console.log(sheet.rules[0].cssText);
  debug(sheet);
</SCRIPT>
Il fonctionne parfaitement et affiche bien :
Nom : 01.png Affichages : 103 Taille : 185,2 Ko
MAIS, le problème c'est que je dois utiliser le même style dans un IFRAME. Je n'ai pas le contrôle sur le contenu de ce IFRAME, je travaille sur un outil à ajouter dans un forum.
Tout ce que je peux y faire, c'est ajouter du CSS et du Javascript dans la page principale.
Je cherche donc à transmettre tous mes styles de la page principale au IFRAME par Javascript, et là encore, tout fonctionne bien,
SAUF quand j'arrive à la classe "tableau" : le cadre ne s'affiche pas
Le texte dans la console confirme que la partie border-image n'est plus dans cssText.
Alors grâce à un module debug(), j'affiche le détail de ce je trouve dans mon styleSheets, et Ô surprise ! la partie border-image a en effet disparue !

Nom : 01.png Affichages : 85 Taille : 35,5 Ko

Mon module debug montre que border-image a disparu du cssText, et pourtant il se trouve bien dans borderImage, pourquoi ? Bogue ou particularité de Chrome ?
Je vous épargnerai les images, mais j'ai essayé avec Firefox et là tout est correct.