应用font-face时如何修复IE7旋转错误？

Question

<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>

使用此代码时，Internet Explorer 7会生成：

溢出时：隐藏;从.dt类中删除，它工作正常：

当Arial用作font-family时，它再次正常工作：

这个代码只是我在更大项目中出现此错误的测试代码。这就是我使用这些元素和css属性的原因。

有没有解决办法？