Internet Explorer -ms-фильтр, примененный несколько раз

Question

Пытаясь повторить ответ на вопрос: Not skewed text in skewed class button

Код для ответа предоставляется по адресу: http://jsbin.com/obusoy/6/edit

Моя проблема заключается в том, что мое решение должно работать в IE8, поэтому я должен использовать -ms-filter вместо более дружественной функции перекоса в CSS3.

я получил значения для преобразования из http://www.useragentman.com/IETransformsTranslator/

Мой CSS является:

.button-wrapper { 
    background: #fff; 
    border: 1px solid #bbb; 
    border-color: #ddd #ccC#bbb; 
    overflow: hidden; 
    width:    120px; 
    height:   40px; 

    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8152074690959046, M12=-0.6840402866513375, M21=-3.885780586188048e-16, M22=1.0641777724759122, SizingMethod='auto expand')"; 
    margin-left: -6px; 
    margin-top: -4px; 

/* 
FORMULA IN TRANSLATER: skew(-20deg) rotate(20deg) 
EQUIVALENT OF: 
    -webkit-transform: skewX(-20deg); 
    -moz-transform: skewX(-20deg); 
    -o-transform: skewX(-20deg); 
    transform: skewX(-20deg); 
*/ 

} 

.button-wrapper:hover { 
    background: #efe; 
    border-color: #090; 
} 

.button-wrapper button { 
    background: transparent; 
    border: 0; 
    cursor: pointer; 
    font-size: 20px; 
    font-weight: bold; 
    padding: 4px 0; 
    margin: 0; 
    width: 100%; 

    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8152074690959046, M12=0.6840402866513375, M21=-3.885780586188048e-16, M22=1.064177772475912, SizingMethod='auto expand')"; 

/* 
FORMULA IN TRANSLATER: skew(20deg) rotate(-20deg) 
EQUIVALENT OF: 
    -webkit-transform: skewX(20deg); 
    -moz-transform: skewX(20deg); 
    -o-transform: skewX(20deg); 
    transform: skewX(20deg); 
*/  
} 

.button-wrapper button:hover { 
    color: #060; 
} 

Мой HTML является:

<div class="button-wrapper"> 
    <button id="RefreshButton3" runat="server" ServerClick="RefreshButton_Click">Refresh</button> 
</div> 

Моя проблема заключается в текст не совсем перекос обратно в оригинальное количество (выглядит сжатым по горизонтали и еще немного курсивом).

Каковы правильные значения преобразования для использования? Какой шаг мне не хватает?

ОБНОВЛЕНИЕ: Решение найдено. Проблема была в порядке операций. Если первое преобразование является косой() rotate(), то второе преобразование должно вращаться() skew(). Это дает несколько иную матрицу, на втором этапе:

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.064177772475912, M12=0.6840402866513375, M21=-3.885780586188048e-16, M22=0.8152074690959046,, SizingMethod='auto expand')"; 

Answer 1

(проводке как отдельный ответ, как это рекомендовано в комментарии)

Проблема была в порядке вопросов эксплуатации. Если первое преобразование является косой() rotate(), то второе преобразование должно вращаться() skew(). Это дает немного другую матрицу на втором этапе:

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.064177772475912, M12=0.6840402866513375, M21=-3.885780586188048e-16, M22=0.8152074690959046,, SizingMethod='auto expand')";