关于网页的小笔记：Firefox 和 IE、fieldset 标签
source link: https://yihui.org/cn/2007/09/notes-on-firefox-ie-and-fieldset/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
关于网页的小笔记：Firefox 和 IE、fieldset 标签
谢益辉 / 2007-09-06
做网页时比较头疼的事情之一就是要不停地考虑兼容问题：一方面考虑不同的分辨率下的效果（1024 x 768、1280 x 1024 等），另一方面就是浏览器的兼容（Internet Exporer、Mozilla Firefox 等）。在我做网站的初期，我比较重视前者，因此做网页时经常换分辨率，那时候还特别重视 800 x 600 的分辨率，如今觉得这种小显示器可能已经只是少数了吧，因此还是以 1024 x 768 为中心设计网页的宽度（980px 左右），保证在 1024 x 768 下面把屏幕基本填满，而在 1280 x 1024 下面看着也不觉得太窄就行；后来开始用 Firefox 时，发现 IE 和 Firefox 对 HTML 的解析有很多区别，因此开始琢磨浏览器的兼容问题。
昨天花了好半天时间把这个 Blog 的模板自己重新改写了一遍，这个过程中曾经对层（div）的对齐问题恼火了一阵子，因为设置 body 的文本对齐为居中之后，里面的 div 在 Firefox 下死活都不肯居中对齐，后来才明白，必须得设置 div 的左右边距为 auto 才行。总体感觉 Firefox 对 HTML 的解析还是好一些，比如本页右边的那些方框中的列表项我都设置了强制不换行（white-space: nowrap;）、隐藏多余的部分（overflow: hidden;），可是当鼠标移上去的时候，IE 就会把多余的部分又给显示出来，而 Firefox 就不会。这一点我想了半天都没找出好办法解决，于是就那样扔着吧，不管了。
其实这次改模板的主要目的是想应用 <fieldset> 和 <legend> 这两个标签，顺便把灰色的背景改为白色、把引用 <blockquote> 和代码 <pre> 的样式重新设置一下。一段时间之前我曾经看到过一个叫 Planet PHP 的国外 Blog 站，当时特别喜欢它那种像 Visual Basic 里面 Frame 控件的格式，也就是这样的：
Here is the titleThe FIELDSET element defines a _form control group_. By grouping related form controls, authors can divide a form into smaller, more manageable parts, improving the usability disaster that can strike when confronting users with too many form controls. The grouping provided by FIELDSET also helps the accessibility of forms to those using aural browsers by allowing these users to more easily orient themselves when filling in a large form.
因此看了看它的网页源码，发现用的是 <fieldset> 和 <legend> 标签，本来之前觉得挺神奇，还以为是用 CSS + 表格作出来的，看了源码才知道原来这么简单。于是乎，我这个 Blog 页面也就改造成这样了。
关于引用和代码的样式，其中 “引用” 采用了一个 “引号” 的图片作为背景放在左上位置，而 “代码” 采用了上下两条水平虚线作为分界标志，这两种样式的字号都缩小为 11px，不过在 IE 下面看不出 11px 和 12px 汉字的区别，但在 Firefox 下英汉的 11px 字号都确实被缩小了。
← 猪肉涨价、查证的保安 网页中的图片点击放大效果：Highslide 和 Lightbox →
Recommend
-
45
导读 TLS 1.3已经酝酿多年，距离上个版本发布已经过去了10年时间。TLS 1.2存在某些问题，也成为了黑客最喜欢的攻击方式，因此TLS 1.3提供了更现代化、更安全的加密访问方式。 上周五，负责开发和推动互联网标准的互联网工程任务小组（IETF）发...
-
10
谈到 <fieldset> 与 <legend> ，大部分人肯定会比较陌生，在 HTML 标签中，属于比较少用的那一批。 我最早知道这两个标签，是在早年学习 reset.css 或者 normalize.css 时，在这些重...
-
9
Firefox一次关闭多个标签页 才知道原来Firefox可以一次选择关闭多个标签页，方法很简单。 按住Ctrl后Shift，然后用鼠标选中多个标签页，被选中的标签页上会出现一个蓝色的横条
-
0
oldj's blog老杰的作品标签：网页游戏返回所有文章列表使用 PICO-8 开...
-
5
关于网页的小笔记：Firefox、IE 和 JavaScript 谢益辉 / 2007-10-10 昨天半夜被一个 JavaScript 的问题迷惑了好一阵子，然后才反应过来，这又是 IE 和 Firefox 的差别。主要问题是，Firefox 对 document.all["id"] 这...
-
8
← 量子机器学习领域的新定理捅了一个大篓子今日好价：跳舞猫手办 →majer @ 2021.05.19 , 00...
-
4
Component development: How to create a collapsible Fieldset in neo.mjsI got asked to create more content which can help new developers getting up to speed. In general there are two main topics which make the most sense:
-
7
V2EX › Python selenium firefox 多标签页自动关闭问题 pandameng · 1 天前 · 278 次点击...
-
5
功能更新 | 用户详情页与标签、网页问卷等功能上线 | NPSmeter_专业的NPS工具，帮助产品经理提升NPS和用户体验 近期NPSMeter更新了四个用...
-
4
Windows 11/10 Edge、Chrome PWA 网页应用将支持“标签”界面-51CTO.COM Windows 11/10 Edge、Chrome PWA 网页应用将支持“标签”界面 作者：潇公子 2022-05-31 07:29:42 据 Windows Lates...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK