如何避免IE7中Zoom功能放大滚动条

简介:
由于现在显示器越来越大17'、19'甚至20'都很普通了,并且显示器的分辨率也越来越高,使用1280x1024的用户已经高于使用800x600的用户(根据本站统计)。原有的大量为800x600 9pt字体以及一些为1024x768 9pt字体设计的网页已经非常过时了。所以Zoom功能逐渐成为了浏览器的必备功能。

    这个功能我最早是在Opera中看到的(但我并不知道是哪种浏览器最先提供),当时也就是为了用它来对付9pt蚂蚁字体网页,不过由于那时Opera对IE中显示完好的网页问题比较大,用了一段时间就没怎么用了,或者只是偶尔用用。后来使用Firefox,发现FF也提供了这个功能,不过FF的Zoom功能和Opera提供的Zoom功能效果是不同的。Opera的Zoom功能是对页面做按比例放大,就是说我们看到的放大页面就像是在放大镜下看到的效果一样。而FF提供的Zoom功能类似IE的字缩放,但又有所不同(IE是真正的文字缩放,而且只能缩放没有使用CSS限制的默认字体的大小)。FF的字体缩放不管字体是否使用CSS定义,都可以被缩放,并且除了图片外,文本框、复选框以及下拉列表框等控件也会被缩放。

    这两种缩放各有优势,不能说谁特别好,也不能说谁特别差。只是Opera的Zoom方式比较适合对付将网页宽度定死为适合800x600或1024x768的页面,而Firefox的Zoom适合对付页面宽度根据浏览器宽度自动填充的页面。在这个Zoom功能方面,IE7之前的IE做的那是一个差劲啊。由于大多数网页都使用CSS定义字体的大小,所以IE提供的那5个Level的字体大小控制,几乎没有任何实用价值。当然目前值得大家高兴的是,IE7提供了Zoom功能。

    IE7提供了类似Opera那样的Zoom功能,可是不知道IE在搞什么飞机,Zoom页面的同时,有很大一部分网页的滚动条也会被同时Zoom:(。本blog首页被Zoom in 400%后的效果如下:
    IE7.Zoom.400.png
    // 这滚动条也被放大的效果让人相当伤感。。。

    通过简单研究,原来IE7提供的这个Zoom功能是受doctype定义影响的。像我们博客园中每位blogger自己的首页使用的doctype是:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">,这时页面的滚动条就会被一起Zoom。而博客园首页和管理页面中的doctype是:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">,这时页面滚动条就不会被Zoom。

    除了标示出dtd文件的URL外,其实只需要修改DTD的类型就可以避免滚动条被Zoom,比如最简单删掉Transitional限制:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">,这样就可以了。至于到底IE7组要怎么要的doctype,这个我目前还没有找到正式的文档。


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

目录
相关文章
|
6天前
|
前端开发 UED
在响应式布局中,如何避免 overflow 属性法导致的滚动条显示问题?
【10月更文挑战第27天】可以在响应式布局中有效地避免因`overflow`属性法导致的滚动条显示问题,提高页面的布局美观度和用户体验,使页面在不同的设备和屏幕尺寸下都能够呈现出良好的视觉效果和交互性能。
|
3月前
|
前端开发
CSS动画新技巧:打造阴影上下抖动的视觉效果!
CSS动画新技巧:打造阴影上下抖动的视觉效果!
|
3月前
|
前端开发 图形学
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
|
6月前
win32编程 -- 滚轮实现放大或缩小图片
win32编程 -- 滚轮实现放大或缩小图片
57 0
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
|
JavaScript API 容器
IntersectionObserver实现横竖滚动自适应懒加载
ntersectionObserver实现横竖滚动自适应懒加载 这几天使用vitepress编写个人网站的时候,编写了一个存放图片的组件,理所当然的,这个组件应该实现图片懒加载,并且由于这个组件存放的图片可以是非常多的,所以实现懒加载就显得极为重要了,但是由于我实现这个组件的方式有点特别,是用盒子的背景图来存放图片的,并且支持横向滚动,所以大致搜索了下了解到了IntersectionObserver这个api非常适合我用来实现这个功能(缺点就是兼容性可能差点);
139 0
IntersectionObserver实现横竖滚动自适应懒加载
|
前端开发 JavaScript Serverless
移动端弹出阴影遮罩的几点问题和解决方法
在做移动端的立即购买页面时,点击底部固定栏立即购买按钮需要弹出一个阴影遮罩,在遮罩顶部有一个固定在底部的页面,所以总共是3层页面:最底层浏览页->阴影遮罩页->最上层的立即购买选择规格数量页;效果如下图:
226 0
移动端弹出阴影遮罩的几点问题和解决方法
|
编解码 前端开发 UED
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)
每日学一点加强技术水平,夯实基础。 阅读这篇文章,一起学习rem布局吧。
395 0
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)
|
JSON 搜索推荐 Serverless
iOS绘制物理按钮 - 透明圆角渐变边框
iOS绘制物理按钮 - 透明圆角渐变边框
388 0
iOS绘制物理按钮 - 透明圆角渐变边框
|
计算机视觉
Qt实用技巧:代码中QIcon缩放(QPixmap的手动放大和QIcon自动缩小)
Qt实用技巧:代码中QIcon缩放(QPixmap的手动放大和QIcon自动缩小)
Qt实用技巧:代码中QIcon缩放(QPixmap的手动放大和QIcon自动缩小)