jQuery Заголовок направления текста - firefox

Question

У меня есть заголовок в аккордеоне jquery, который я повернул на «вертикальный» в моем CSS. Это работает в Chrome, но не в Firefox или Internet Explorer?

Я попытался добавить '! Important', но он все еще не отображает поворот?

#contentAccordion{ 
    margin:0 auto; 
    height:500px; 
    width: 100%; 


} 

ul.accordion{ 
    list-style:none; 
    position:absolute; 
    left: 1px; 
    top:0px; 
    font-family: Cambria, serif; 
    font-size: 16px; 
    font-style: italic; 
    line-height: 1.5em; 
    width: 100%; 

} 
ul.accordion li{ 
    float:right; 
    width:115px; 
    height:380px; 
    display:block; 
    border-right:2px solid #fff; 
    border-bottom:2px solid #fff; 
    background-color:#fff; 
    background-repeat:no-repeat; 
    background-position:center center; 
    position:relative; 
    overflow:hidden; 
    cursor:pointer; 
    -moz-box-shadow:1px 3px 15px #555; 
    -webkit-box-shadow:1px 3px 15px #555; 
    box-shadow:1px 3px 15px #555; 
} 
ul.accordion li.bg1{ 
    background-image:url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/air.jpg); 
} 
ul.accordion li.bg2{ 
    background-image:url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/2.jpg); 
} 
ul.accordion li.bg3{ 
    background-image:url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/3.jpg); 
} 
ul.accordion li.bg4{ 
    background-image:url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/4.jpg); 
} 
ul.accordion li.bg5{ 
    background-image:url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/air.jpg); 
} 

ul.accordion li.bleft{ 
    border-left:2px solid #fff; 
} 
ul.accordion li .heading { 
background-color: rgba(245, 240, 240, 0.65); 
padding: 10px; 
margin-top: 250px; 
opacity: 0.6; 
text-transform: uppercase; 
font-style: normal; 
font-weight: bold; 
letter-spacing: 10px; 
font-size: 25px; 
color: rgb(12, 11, 11); 
text-align: center; 
text-shadow: -1px -1px 1px #ccc; 
-webkit-transform: translatey(-100%) rotate(-90deg); 
line-height: 80px; 
height: 80px; 
width: 280px; 
margin-left: -100px; 

} 
ul.accordion li .description{ 
    position:absolute; 
    width:260px; 
    height:175px; 
    bottom:0px; 
    left:0px; 
    display:none; 
} 
ul.accordion li .description h2{ 
    text-transform:uppercase; 
    font-style:normal; 
    font-weight:bold; 
    letter-spacing:1px; 
    font-size:45px; 
    color:#444; 
    text-align:left; 
    margin:0px 0px 15px 20px; 
    text-shadow:-1px -1px 1px #ccc; 
} 
ul.accordion li .description p{ 
    line-height:14px; 
    margin:10px 22px; 
    font-family: "Trebuchet MS", sans-serif; 
    font-size: 12px; 
    font-style: italic; 
    font-weight: normal; 
    text-transform: none; 
    letter-spacing: normal; 
    line-height: 1.6em; 
} 
ul.accordion li .description a{ 
    position:absolute; 
    bottom:5px; 
    left:20px; 
    text-transform:uppercase; 
    font-style:normal; 
    font-size:11px; 
    text-decoration:none; 
    color:#888; 
} 
ul.accordion li .description a:hover{ 
    color:#333; 
    text-decoration:underline; 
} 

ul.accordion li .bgDescription{ 
    background:transparent url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/bgDescription.png) repeat-x top left; 
    height:340px; 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    width:260px; 
    display:none; 
} 

/* Vertical Accordion Style */ 

.container { 
     width:100% !important; 
     position:relative; 
     margin:40px auto 0 auto; 
     top: -17px; 
     left: 0px; 
} 


.va-wrapper{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    overflow:hidden; 
    background:#000; 
     left: 0px; 
} 
.va-slice{ 
    cursor:pointer; 
    position:absolute; 
    width:100%; 
    left:0px; 
    overflow:hidden; 
} 
.va-slice-1{ 
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/Airfreight10.png) no-repeat center center; 
} 
.va-slice-2{ 
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/Seafreight2.png) no-repeat center center; 
} 
.va-slice-3{ 
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/Satellite.png) no-repeat center center; 
} 
.va-slice-4{ 
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/Guarding11.png) no-repeat center center; 
} 
.va-slice-5{ 
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/Move3.png) no-repeat center center; 
} 
.va-slice-6{ 
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/Investigations2.png) no-repeat center center; 
} 
.va-slice-7{ 
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/transport2.png) no-repeat center center; 
} 
.va-slice-color-1{ 
    background-color:#97c5eb; 
} 
.va-slice-color-2{ 
    background-color:#68ace5; 
} 
.va-slice-color-3{ 
    background-color:#0072cf; 
} 
.va-slice-color-4{ 
    background-color:#0039a6; 
} 
.va-slice-color-5{ 
    background-color:#00338e; 
} 
.va-slice-color-6{ 
    background-color:#002c76; 
} 
.va-slice-color-7{ 
    background-color:#002144; 
} 
.va-title{ 
    font-family: 'Open Sans Condensed', sans-serif; 
    text-transform:uppercase; 
    font-size:40px; 
    margin-left:20px; 
    color:#fff; 
    text-shadow: 0px 0px 1px white; 
} 
.va-content{ 
    display:none; 
    margin-left:25px; 


} 
.va-slice p{ 
    font-size: 22px; 
    font-style: italic; 
    font-family:Georgia, serif; 
} 
.va-slice ul{ 
    margin-top:20px; 
} 
.va-slice ul li{ 
    float:left; 
    margin:0px 2px; 
} 
.va-slice ul li a{ 
    color:#000; 
    background:#eede2f; 
    padding:3px 6px; 
    font-size:14px; 
    font-family:'PT Sans', sans-serif; 
    text-transform:uppercase; 
} 
.va-slice ul li a:hover{ 
    background:#000; 
    color:#fff; 
    text-shadow:none; 
} 
.va-nav span{ 
    width:40px; 
    height:25px; 
    background:transparent url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/prev.png) no-repeat center center; 
    position:absolute; 
    top:-35px; 
    left:50%; 
    margin-left:-20px; 
    text-indent:-9000px; 
    opacity:0.7; 
    cursor:pointer; 

    z-index:100; 
} 
.va-nav span.va-nav-next{ 
    background-image:url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/next.png); 
    top:auto; 
    bottom:-35px; 
} 
.va-nav span:hover{ 
    opacity:1.0; 
} 

Answer 1

Вы только использовать -webkit-transform: translatey(-100%) rotate(-90deg);

Вы забыли другие префиксы производителя: -moz- для FireFox, -ms- для IE, и т.д. ...

Если вы хотите знать, что браузеры поддерживают свойство: http://caniuse.com/#search=transform Очевидно, вам не нужен префикс -moz для этого свойства, Firefox уже реализовал его.

Лучшая практика: всегда определяют правила без префикса поставщика в нижней части:

-webkit-transform: translatey(-100%) rotate(-90deg); 
transform: translatey(-100%) rotate(-90deg); 

Таким образом, он все равно будет работать в будущем, даже если браузер удаляет поддержку префикса.