次の CSS と div を使用して画面に表示する大きなテキスト ドキュメントがあります。アイデアは、ユーザーがテキストを読み下げ、3 分後に到達した行番号を記録し、これにより 1 分あたりの読み取り速度が得られるというものです。
問題は、IE と Chrome では 1 行あたりの単語数がわずかに異なるため、Chrome ではページ全体で 189 行ですが、IE では約 195 行になります。1 行あたりの単語数を標準化する方法はありますか? またはこれを行うより良い方法は？
どんな助けでも大歓迎です！
コードの抜粋は次のとおりです。
.row01 {
width: 870px;
margin: 0 auto;
padding: 15px 0 0 0;
}
.col01 .numbers {
float: left;
padding-right: 4px;
padding-left: 4px;
color: #6BACC9;
font-size: 0.75em;
line-height: 1.6em;
margin-top: 1.6em;
}
.col01 .text {
float: left;
margin-left: 2px;
margin-top: 1.6em;
font-size: 0.75em;
line-height: 1.6em;
width: 830px;
}
<div class="row01">
<div class="col01">
<h2>The Time and Stress Crisis by Dr David Lewis</h2>
<div class=numbers>1. <br />2. <br />3. <br />4. <br />5. <br />6. <br />7. <br />8. <br /></div>
<div class=text>Let me introduce you to a young acquaintance of mine - Chris. I think you may find you have common interests.<br />
<br />
Chris came into the office an hour early to tackle a mountain of urgent paper work. Intimidated by the sheer size of the backlog, he found it hard to concentrate or decide his priorities. As a result, by the time other staff arrived, his sole accomplishment had been to transform that mountain into several smaller mounds. For the rest of the day, constant interruptions - by subordinates seeking guidance, colleagues needing to discuss departmental projects, demands from his superiors, endless telephone calls and unscheduled visitors - meant he made little further progress in catching up with his work. Twelve hours after his working day had started, an exhausted and demoralised Chris left for home, with the backlog almost unchanged.<br />
<br /></div>
</div>
</div>
アップデート
フォント サイズを絶対サイズに変更した後でも、長いテキスト ドキュメントで IE9 に問題がありました。そのため、IE9 に IE8 標準の採用を強制することになりました。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >