位置：首页>> 网络编程>> 网页设计>> 数学公式“四又二分之一”

数学公式“四又二分之一”

作者：林小志　来源：林小志博客　发布时间：2009-01-14 20:03:00　

标签：数学,css,hack,浏览器

几个月来好像就现在暂时无需求，稍微轻松一下，然后在Q群中发现有人提问，怎么用CSS实现数学公式“四又二分之一”。对于这个公式个人认为用图片比较合适点，在样式中似乎也没专门用来表现公式的。记得在WORD中有一个插件好像是“公式”，可以直接在WORD中插入公式，然后是以图片的显示表现的。

这个要求不算太难，但对于在网页中要体现语义的话，就不合适了。先来看一下代码，以下代码在各个浏览器中表现都有所差异，估计应该是对first-letter的解析稍微有所不同吧，尤其是在FF3里需要加上padding-top:7px;才能比较正常，加了padding-top:7px;却对IE里的表现无影响，其他的浏览器呢也都有所不同。不过这个不是我今天要说的内容，今天要的只是“首字下沉”来简单实现一个简单的数学公式，如果需要各个浏览器都一样，那只有hack的方法，至于怎么hack，实在没太多兴趣去讲，对于一个不正确的结构却要以正确的姿态出现，实在有悖常理。

CSS代码：

p {width:24px;height:30px;padding:10px;line-height:.5;text-align:center;}
p:first-letter {float:left;line-height:1.5;}

XHTML结构：

<p>4 1 — 2</p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简单的数学公式</title><style type="text/css">p {width:24px;height:30px;padding:10px;line-height:.5;text-align:center;}p:first-letter {float:left;line-height:1.5;}</style></head><body><p>4 1 — 2</p></body></html>

由上面的结构可以看到，数学公式的内容是 4 1 — 2 这样的内容。对于这样的一个结构，如果在无样式的情况下看到，有谁会明白呢？

所以对于数学公式要在网页上显示，建议还是采用图片代替文字的方式来实现

<span>四又二分之一</span>

对于这样的一个内容，就算是没有样式，看到的内容还是可以很明了的知道是四又二分之一，而不是 4 1 — 2 这样的内容了。

投稿

数学公式“四又二分之一”

猜你喜欢