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

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

几个月来好像就现在暂时无需求，稍微轻松一下，然后在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 这样的内容了。

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

投稿

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

猜你喜欢

用户凭什么跟你注册?

解决MySQL 5数据库连接超时问题

PL/SQL实现Oracle数据库任务调度

不能安装SQL Server 2005的问题及解决方法

JavaScript学习心得之如何走出初学困境

MySQL Order By用法

JavaScript框架比较:选择器

如何处理Oracle中较大的文本数据？

Oracle9i的全文检索技术开发者网络Oracle

记录集不支持更新。这可能是提供程序的限制，也可能是选定锁定类型的限制

ASP函数过滤数组中重复数据方法

XML 增、删、改和查示例

Javascript中Eval函数的使用

正在研究XMLHTTP如何正确传送大于7F(127)的二进制数据

用户体验的误解

JavaScript链式调用的设计

Dreamweaver量身打造Wordpress留言板（三）

ASP中如何判断字符串中是否包含字母和数字

最大限度优化你的Asp性能

SQL SERVER的字段类型介绍