本文探讨了在Firefox和Internet Explorer浏览器中Web门户显示不一致的问题，并提供了使用em值替代像素来标准化显示的方法。通过调整字体大小和图像尺寸，确保跨浏览器的一致性和响应性。
Firefox3 和 Internet Explorer 7看上去有什么不同吗？如何能够最好地使这些浏览器表现出一致的行为？应该使用像素还是 em 值？developerWorks 专栏作家Judith M. Myerson 向您展示了如何标准化显示运行在 Firefox 和 IE 中的 Web门户。她提供了一些技巧和提示，可以帮助您使用 em 值简化门户内容的开发，包括 Asynchronous JavaScript + XML(Ajax) 应用程序。
在早期的 developerWorks 文章（从 参考资料获得链接）中，我讨论了如何监视网络冗余和故障转移，并创建程序解决网络问题；在开发 Ajax应用程序时应避开哪些陷阱，包括一些优化浏览器差异的有用解决方案；提供了一些可以加速 Ajax应用程序的解决方案；此外，还展示了一些可以加强应用程序的工具，从而改进 Ajax 应用程序中的安全问题。
在本文中，我将讨论在 IE 7 和 Firefox 中运行 Web 门户为何显示不同的结果。IE 7 提供了可以调整大小的默认字体，而 Firefox 3可以让您设置默认字体而不需要进行重新调整。要使门户在两个浏览器中使用相同的方式显示字体和表，需要使用 em调整它们的大小。在本文中，我将展示根据对象在屏幕上的可见显示，为何 em 对于可设置的基本字体是相对的，而 px 对于基本字体是绝对的。我还提供了一些技巧和提示，可以帮助您使用 em 值简化 Web 门户内容的开发，包括 Ajax 应用程序。
人们查看文本段落的时间要多于查看图像的时间。人的眼睛需要随这些段落移动，但只有在美术馆观看图像时才需要认真注视图像。由于人眼需要随着文本移动，那么如果浏览器使用像素定义字体的绝对大小，人们将注意到 IE 7 和 Firefox 中运行的 Web页面在显示文本时是不一样的。如果这种差异十分明显，就会造成问题。
此外，如果放大像素页面，但文本大小不能够相应地变大，就会造成各个文本字段彼此覆盖。因此整体布局变得一团糟！所有这一切的罪魁祸首就是像素（也就是圆点）。它们不能够进行扩展并且是固定大小的。
要处理大小问题，我将使用 em 方法，它始终相对地调整大小和进行扩展。我使用 em 作为父元素字体大小的百分比。
如清单 1 所示，最上面的 <div> 层使用计算过的字体大小 16px 作为父元素。第二个 <div> 层显示子字体大小被修改为 0.75em。通过将 16 乘以 0.75，将得到计算后的子字体大小 12px。在第三个 <dev> 层中，第二层的子字体大小变为新的父字体大小。将这个父字体乘以 0.75 得到一个较小的字体大小 9px。
<body>
<div style="font-size:16px;" >
<div style="font-size:0.75 em;">
<div style="font-size:0.75 em;">
</div>
</div>
</div>
</body>
|
除了字体外，可以在填充、空白、边框以及任何可以设置大小的地方使用 em 值。
IE 7 和 Firefox 3 中的默认字体大小是 16px，它等于 1 em。IE 将这种字体大小表示为 “中等大小” 的文本。通过为正文选择器（body selector，也称为块级元素）的 font-size 属性分配 62.5% 的值可以减小这个字体大小，如清单 2 所示。
<style type="text/css">
body {font-size: 62.5%}
</style>
|
这种分配将 16px 减小到 10px。减小了的字体大小仍然是 1 em。在 Firefox3 中，您可以在更高的分辨率屏幕上将默认大小修改为更大的值。表 1 展示了三种屏幕分辨率使用的推荐字体大小。
| 字体大小 | 屏幕分辨率 |
|---|---|
| 20px | 1280x960 |
| 22px | 1400x1050 |
| 28px | 1792x1344 |
所有设置可以转换为几乎相同的物理大小，即 1024x758 分辨率下的 16px 字体大小。如果使用的是该表以外的屏幕分辨率，那么使用下面的等式计算适合您的字体大小：
屏幕分辨率的宽度/64 = 字体大小
例如，
1280/64 = 20px
考虑包含两列的文档布局 — 主要内容和一个侧边栏。文档补充了一个导航菜单作为页眉，使用公司信息作为页脚。
<body> <div id="navigation"> ... </div> <div id="main_content"< ... </div> <div id="side_bar""< ... </div> <div id="footer"< ... </div> </body> |
假设正文选择器的默认基本字体 16px 变为原来的 62.5%，如清单 4 所示。
<style>
body {font-size: 62.5%}
#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}
</style>
|
在产生的文档中，导航和侧边栏中的文本使用 10px 显示，正文使用 12px 显示，而页脚使用 9px 显示。
表 2 中的 em 值假设浏览器默认字体大小是 16px。它还假设在正文选择器中，字体大小属性的值被设置为 1em。
| 字体大小 | em 等效值 | 使用 em 表示的 1px |
|---|---|---|
| 11px | 0.689 | 0.091 |
| 12px | 0.750 | 0.083 |
| 13px | 0.814 | 0.077 |
| 14px | 0.875 | 0.071 |
| 15px | 0.938 | 0.067 |
| 16px | 1.000 | 0.063 |
| 17px | 1.064 | 0.059 |
| 18px | 1.125 | 0.056 |
| 19px | 1.188 | 0.053 |
| 20px | 1.250 | 0.050 |
要获得一个 em 等效值，执行下面的操作：
（子字体大小/父字体大小）= 子 em
例如，12px/16px = .75em
要获得 1 像素的等量 em，执行下面的计算：
（1/字体大小） x 所需像素 = em 等效值
例如，（1/14px） x 1px = .071 em
清单 5 显示正文选择器的字体大小属性为 1 em。假设该值与浏览器默认字体大小 16px 是等效的。因此，要计算 770px 的 em 等效值，使用以下等式：
（1px/16px）x 770px = 48.125em
将结果应用到 div 选择器的宽度属性。
body{
font-size:1em;
text-align:center;
}
div{
width:48.125em;
margin:0 auto;
}
|
这些代码表明 div 选择器继承了一个属性，以将文本居中。该元素将根据文本的计算宽度的大小，自动将相等的 em 值分配给左边和右边的空白。
现在，我将使用 “wrap” 作为 ID 的名称，用以识别最高的 <div> 层上的控制层，如清单 6 所示。
<body> <div id="wrap"> . . . </div> </body> |
我希望使用 1000px 的宽度，以便轻松地应用到更高分辨率的屏幕中。1000px 的 em 表示是多少？让我们看一看。
我知道父 (<body>) 有一个默认字体大小 16px。子层 (<div id="wrap">) 将继承该值。我可以使用下面的数学等式计算 1px 的 em 表示：
（1 / 父字体大小） x 所需的像素值 = em 值
在这个式子中代入值，得到：
（1/16px） x 1000 = .0625em x 1000 = 62.50em
现在，看一下清单 7 的三个选择器。它们是 div#wrap、p 和 h1。
<style>
body {font-size: 1 em}
div#wrap{
width: 62.50em;
margin: 1.5em auto;
border: 0.063em solid #ccc;
background: #fff;
}
p{
font-size: 0.750em;
line-height: 1.5em;
margin: 1.5em;
}
h1{
font-size: 1.125em;
}
</style>
|
该清单表示，具有相同 em 值的字体大小差异是由于不同子选择器中的分层布局造成的。其中一个选择器中的子字体大小，将成为处于选择器集合中较低层次的另一个选择器的父字体大小。这与清单 2 不同，后者显示了具有相同 em 值的字体大小差异。
在 div#wrap 选择器中，我将宽度设为 62.50 ems（1000px）并自动填充左右空白把层置于正中。我使用 .063（1px）的灰色边框和白色背景，并将文本设为左对齐。
该段落从其父 <div id="wrap"> 继承了 1em（16px）的字体大小。我已经知道 1px 是 0.0625em。我将使用相同的算法获得 12 px 的 em 值：
（1/16px） x 12px = 0.750em
接下来，将把结果应用到 p 选择器的 font-size 属性中，如清单 8 所示。
p{
font-size: 0.750em;
}
|
要计算出基本行距所需的行高和 18px 的空白，执行下面的计算：
（18px /12px） = 1.5em
这个等式表明行高和空白为字体大小的 1.5 倍。
 |
|
<h1> 从其父 <div id="wrap"> 继承了一个 1em（16px）字体大小。因此，我已经从前面知道了 1px 的 em 值：0.0625em。要将 <h1> 设置为 18px 的字体大小，执行下面的操作：
(1/ 16) x 18 = .0625 x 18 = 1.125em
在调整文本大小时，假设图像的大小是基本行距倍数。清单 9 展示了高度和宽度为 90px（18px x 5）的图像。
<body> <p> <img src="90.jpg" width="90px", height ="90x"alt="Colorado Pier" /> . . . </p> </body> |
该清单表示图像是段落（父元素）的子元素，因此图像继承了 12px 的字体大小。因此，要使用 em 计算图像的宽度和高度，我使用下面的等式：
(1/12) x 90 = 7.5em
该图像在右边和底部分别有 18px 的空白，并且浮动在段落文本的左侧。我知道 12px/18px 对于父段落是 1.5 em，如清单 10 所示。
<style>
p img{
width: 7.5em;
height: 7.5em;
margin: 0 1.5em 1.5em 0;
float: left;
}
</style>
|
假设父字体大小为 12px，如果这样的话，10px 的 em 值为 0.833。然后将这个结果添加到字体大小属性，如清单 11 所示。
<style>
#main_content LI {font-size:0.833em}
</style>
|
这表示所有正文列表项应当使用 10px 显示。我使用同一个等式实现这一点：
10 / 12 = 0.833
如果列表之间互相包含会发生什么情况？它将变小。这是因为 #main_content div 中的列表项应当是其父字体大小的 0.833 倍。要防止出现继承缩小现象，使用下面的选择器集：
LI LI {font-size:1em}
这表示在另一个列表项中的的任何列表项应当和其父元素（另一个列表项）保持一致。您应当使用完整的子选择集合，以防止在开发期间造成混乱：LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}。
对表单和表格需要执行类似的工作，以使表单控件和表单元格继承合适的大小：INPUT, SELECT, TH, TD {font-size:1em}。
现在，我将修改清单 2 中的元素，避免在父列表包含一个子列表时段落和列表的字体大小缩小。首先，从清单 2 的 p 选择器中去除 font-size 属性。然后，对 p li li 的子选择器集使用相同的字体大小，如清单 12 所示。
<style>
body {font-size: 1 em}
div#wrap{
width: 62.50em;
margin: 1.5em auto;
border: 0.063em solid #ccc;
background: #fff;
}
p li li {font size: 0.750 em}
p{
line-height: 1.5em;
margin: 1.5em;
}
h1{
font-size: 1.125em;
}
</style>
|
您需要让由开发人员、测试人员和潜在用户组成的团队标准化 Web 门户在 IE 7 和 Firefox3上的显示，这里提供的方法是在所有设计中使用 em 代替像素。要使浏览器表现出一致的行为，必须使用 em 值提前计划 Web门户的创建、测试和显示。在计划中包括一个 em 计算器，并对它进行开发，以将其集成到浏览器甚至 Web设计应用程序中。解决了这些问题后，就可以更加轻松地标准化在 Ajax 应用程序上的显示。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
