How to fix IE7 rotation bug when font-face applied?

<style>
@font-face {
    font-family: 'AlteHaasGroteskBold';
    src: url('altehaasgroteskbold-webfont.eot');
    src: url('altehaasgroteskbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('altehaasgroteskbold-webfont.woff') format('woff'),
         url('altehaasgroteskbold开发者_如何学编程-webfont.ttf') format('truetype'),
         url('altehaasgroteskbold-webfont.svg#AlteHaasGroteskBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
.dt{
  width: 30px;
  height: 246px;
  background-color: #00ff00;
  padding: 2px;
  position: relative;
  overflow: hidden;
}

.rot-90{
  display: block;
  width: 246px;
  height: 250px;
  background-color: #ff0000;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  text-align: right;
}

.title{
  background-color: #008855;
  font-size: 15px;
  font-family: AlteHaasGroteskBold;
}
</style>

<div class="dt">
  <span class="rot-90">
    <span class="title">
      Samsung Galaxy Tab10.1
    </span>
  </span>
</div>

When this code used, Internet explorer 7 produces this:

When the overflow:hidden; is removed from .dt class, it works fine:

When Arial used as font-family, it works fine again:

This code is just my test code for this error in a bigger project. This is why I used this elements and css properties.

Is there any solution to fix it?