Как исправить ошибку поворота IE7 при использовании font-face?

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 используется в качестве семейства шрифтов, он снова работает нормально:

Этот код - только мой тестовый код дляэта ошибка в большем проекте.Вот почему я использовал эти элементы и свойства css.

Есть ли решение, чтобы это исправить?