0

我有一个使用以下 CSS 和 div 在屏幕上显示的大型文本文档。这个想法是用户阅读文本,3分钟后他们记录他们到达的行号,这给出了每分钟的阅读速度。

问题是 IE 和 Chrome 每行显示的字数略有不同,因此 Chrome 在整个页面上有 189 行,而 IE 大约为 195 行。有没有办法标准化每行的字数?或者更好的方法来做到这一点?

欢迎任何帮助!

代码摘录如下:

.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" >
4

3 回答 3

0

区别可能在于浏览器设置:

您可以设置在浏览器中使用的标准字体和字体大小(在 Firefox 和 chrome 中,这是新罗马 16 的时代)。如果元素以 16 pt(标准浏览器设置)的字体显示,则 '2em' 为 32 pt。

我建议您在 css 中使用实际的字体大小(以点或像素为单位)。

于 2013-01-28T11:39:21.320 回答
0

使用像素:px作为字体测量。Pixel-perfect 的人一直使用它来使他们的设计在每个浏览器上看起来都非常相似

于 2013-01-28T13:25:40.907 回答
0

你可能会发现使用 normalise.css 之类的东西很有用:

http://necolas.github.com/normalize.css/

尝试让所有浏览器都显示相同的内容。

于 2013-01-28T13:39:34.733 回答