Internet Explorer -ms-filter多次应用

Question

Trying to replicate answer to question: Not skewed text in skewed class button

The code for the answer is provided at: http://jsbin.com/obusoy/6/edit

My problem is that my solution must work in IE8, so I must use -ms-filter instead of the more friendly skew function in CSS3.

I obtained values for the transform from http://www.useragentman.com/IETransformsTranslator/

My CSS is:

.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;
}

My HTML is:

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

My problem is the text is not quite skewed back to the original amount (looks compressed horizontally and still slightly italic).

What are the correct transform values to use? What step am i missing?

UPDATE: Solution found. Problem was the order of operation matters. If the first transform is skew() rotate() then the second transform must be rotate() skew(). This gives a slightly different matrix in second step of:

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

Answer 1

(posting as separate answer as recommended in comment)

Problem was the order of operation matters. If the first transform is skew() rotate() then the second transform must be rotate() skew(). This gives a slightly different matrix in second step of:

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