CSSで仕切り線みたいのを書いていたらIE10でスクロール毎に大きさが変わるようになった。バグ？ index.html で表示がおかしくなる。 index2.html だと大丈夫。

part-of-index.css

div.index1 {
  height: 34px;
  border-bottom: solid 7px green;
  margin-bottom: 20px;
  clear:both;
}

div.index1 > span.title {
  width: 100px;
  padding: 6px 30px 1px 10px;
  color: #fff;
  font-weight: bold;
  font-size: 19px;
  background-color: green;
  border: solid 2px green;
  float: left;
}

div.index1 > span.title:after {
  position: relative;
  margin-left: 10px;
  top: -2px;
  content: ">";
}

div.index1 > span.tri{
  width: 41px;
  border-bottom: solid 41px green;
  border-right: solid 41px transparent;
  position: relative;
  top: -21px;
}

part-of-index.html

<div class="index1">
  <span class="title">タイトル</span>
  <span class="tri">&nbsp;</span>
</div>

part-of-index2.css

div.index2 {
  height: 34px;
  border-bottom: solid 7px green;
  margin-bottom: 20px;
  clear:both;
}

div.index2 > div.title {
    width: 120px;
    height: 28px;
    padding: 2px 0 0 10px;
    color: #fff;
    font-weight: bold;
    font-size: 1.3em;
    background-color: green;
    border: solid 2px green;
    float: left;
}

div.index2 > div.title:after {
  position: relative;
  margin-left: 10px;
  top: -2px;
  content: ">";
}

div.index2 > div.tri{
  height: 0;
  width: 10px;
  border-bottom: solid 41px green;
  border-right: solid 41px transparent;
  position: relative;
  left: 130px;
}

part-of-index2.html

<div class="index2">
  <div class="title">タイトル</div>
  <div class="tri">&nbsp;</div>
</div>