2016-01-21 1 views
0

O avoir un polyfill pour IE7 qui transforme display:table en tables réelles et j'utilise IE7.js (fichier IE9.js).
Les deux fonctionnent à merveille et les deux font un excellent travail nous permettant de réfléchir moins sur IE7.Appliquer automatiquement appliquer l'espacement des cellules ou de remplissage basé sur «marge» donnée pour IE

C'est ce que je (joindre la feuille principale et la feuille spécifique IE7):

/*IE7*/ 
.sideBySide{ 
    display:table; 
} 
.sideBySide > *{ 
    display:table-cell; 
} 
/*MAIN*/ 
.A{ 
    margin-left: 20px; 
} 



<li> 
    <div class="sideBySide"> 
     <img class="img" src="img"> 
     <div class="sideBySide"> 
      <div class="A">Info A</div> 
      <div class="A">Info B</div> 
     </div> 
     <div>OK</div> 
    </div> 
</li> 

C'est ce que les polyfills génèrent:

<style> 
    ........ .A{ 
     /* CSS that overrides and invalidates what was set for A */ 
    } 
    .newClassA{ 
     margin-left: 20px; 
    } 
    .newClassA > /*etc*/{ 
     /* All properties relative to class A */ 
    } 

</style> 

<li> 
    <div class="sideBySide"> 
     <img class="img" src="img"> 
     <table> 
      <tbody> 
       <tr> 
        <td class="newClassA">Info A</td> 
        <td class="newClassA">Info B</td> 
       </tr> 
      </tbody> 
     </table> 
     <div>OK</div> 
    </div> 
</li> 

La balise <style> est placé comme le dernier dans le <head>.

Pour faire face à cela, je fait ceci:

.sideBySide > * > * > td{ 
    padding-left: expression(this.currentStyle['marginLeft']); 
} 

Malheureusement, cela n'a pas fonctionné. Bien que le CSS donne clairement qu'il devrait avoir une marge Left de 20px, à la place, il retourne auto ... Donc padding-left devient auto.

Existe-t-il un moyen de polyfiler cela de façon transparente? Personne ne s'inquiète ici si cela nécessite une quantité importante de calculs tant que le navigateur ne se bloque pas à cause de cela. Une chose principale que je veux que ce soit à suivre que ce soit supposé être des pièces réutilisables. Si je mets le CSS dans la feuille de style ou dans les autres navigateurs, IE7 doit le suivre aussi.

REMARQUE: Je peux dire que ces deux fonctionnent exactement comme spécifié ici et ce n'est pas un bug sur l'un d'entre eux. Mon problème est que travailler comme spécifié n'aide pas pour ce cas d'utilisation spécifique.
Peu importe combien je veux abandonner IE7 ... Et même IE8, l'entrepreneur veut que nous le soutenions pour quelques années de plus.

+0

Doit-on soutenir les petits navigateurs-à-dire? http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201412-201512 ---- https://www.dropbox.com/s/jroguns8ikl8hjc/browser-support-ie.png?dl=0 –

+0

@CarolMcKay Lire le dernier paragraphe s'il vous plaît. – brunoais

+0

Je m'excuse de ne pas avoir lu ce petit mot @brunoais et vous avez mes condoléances Je vais essayer de retourner mon cerveau maintenant. –

Répondre

0

Cela aiderait-il?

css

.sideBySide table { 
    border-collapse:separate; 
} 

html

<div class="sideBySide"> 
    <img class="img" src="img"> 
     <table> 
      <tbody> 
       <tr> 
        <td class="newClassA">Info A</td> 
        <td class="newClassA">Info B</td> 
       </tr> 
      </tbody> 
     </table> 
    <div>OK</div> 
</div> 
+0

IE7 ne sait pas ce que 'border-collapse: séparé;' est et, même avec le polyfill, il ne gagne pas la possibilité d'avoir une marge parce que c'est une table – brunoais

+0

auriez-vous sortir avec la marge de substitution avec l'espace de remplissage juste pour IE7? Expliquez que certains miracles ne peuvent pas être accomplis? –

+0

Je voudrais si je peux y arriver automatiquement – brunoais