html - 为 IE 和 Chrome 保持每行相同的字数

标签 html css

我有一个大型文本文档,我使用以下 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" >

最佳答案

不同之处可能在于浏览器设置:

您可以设置标准字体和字体大小以在您的浏览器中使用(在 firefox 和 chrome 中,这是 times new roman 16)。 如果元素以 16 pt 的字体显示(标准浏览器设置),则“2em”为 32 pt。

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

关于html - 为 IE 和 Chrome 保持每行相同的字数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14560951/

相关文章:

php - 如何使用 PHP 将 JSON 解析为 html 表?

html - Robots.txt/如何从搜索引擎中隐藏单个 HTML 标签?

html - 在标题 [CSS] 上显示图像的完整尺寸

html - 无法在 Bootstrap 3 中将标签与文本框居中对齐

html - 页面底部出现 'padding' 的异常跨浏览器错误

javascript - 如何停止容器 DIV 上的所有 CSS 覆盖?

css - 在 Shiny 演练中更改 sliderInput 的颜色

html - Html/Css 上的透明磁贴,如 Windows Phone 8

html - 删除无法解释的 img 边距/空间 (CSS)

html - CSS 选择第一个元素而不考虑其级别