我正在用 javascript 编写一个 Lessig-Method 幻灯片对象(所以很有趣,并不重要),而且我一直遇到奇怪的文本布局异常,我不能说我见过这样的异常。然而,它们在我的幻灯片中无处不在。
背景是直截了当的。演示文稿有幻灯片,幻灯片有线条。一行,可以是一个词或一个短语,在我链接的图像中,幻灯片有三行。
演示“屏幕”是浏览器窗口的视口。每条 Line 的 CSS line-height 属性由视口高度除以行数计算得出。每条 Line 都是一个 div,字体大小低于 line-height(90%,但以 px 为单位)。
一张好看的幻灯片看起来像这个页面上的第一个: bbby.org/share/so_pics.html
(我只能添加一个链接)。
这就是奇怪的地方:因为一切都是根据视口大小计算的,所以启动萤火虫控制台或切换到全屏模式会调整一切的大小(刷新时)。在某些情况下,单词的前一到三个字母会一直推到屏幕的左侧,相互堆叠。唯一不同的是我全屏并刷新(并计算了新尺寸)。
根据我设置的字体大小修改器(90%、80%,但再次以 px 设置),它可能发生在常规视图(不是全屏)上。
有没有人见过这样的东西?