数学公式“四又二分之一”
作者：林小志 来源：林小志博客 时间：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>
由上面的结构可以看到，数学公式的内容是 4 1 — 2 这样的内容。对于这样的一个结构，如果在无样式的情况下看到，有谁会明白呢？
所以对于数学公式要在网页上显示，建议还是采用图片代替文字的方式来实现
<span>四又二分之一</span>
对于这样的一个内容，就算是没有样式，看到的内容还是可以很明了的知道是四又二分之一，而不是 4 1 — 2 这样的内容了。
标签：数学,css,hack,浏览器
0
投稿猜你喜欢
SQL Server 2005安装实例环境图解第1/2页
2024-01-16 13:57:26
教你用eclipse连接mysql数据库
2024-01-19 23:30:41
用Python编写简单的微博爬虫
2022-10-07 04:58:34
Python的函数使用详解
2021-11-22 15:34:25
在Golang中执行Shell命令的教程详解
2024-04-25 15:10:51
解决pycharm无法识别本地site-packages的问题
2022-03-12 19:31:13
Python面向对象编程之类的概念
2021-12-24 10:56:33
TensorFlow2.1.0最新版本安装详细教程
2021-11-08 00:14:02
实例讲解MySQL 慢查询
2024-01-20 16:25:56
vscode+PyQt5安装详解步骤
2021-07-27 23:52:55
python3实现多线程聊天室
2021-09-11 07:35:47
Python OpenCV绘制各类几何图形详解
2023-02-04 18:27:01
asp中提取HTML中图片的SRC路径
2008-10-24 08:42:00
php使用curl抓取qq空间的访客信息示例
2023-10-30 05:50:32
win10环境下配置vscode python开发环境的教程详解
2022-09-06 21:19:49
SQL2008的sa账户被禁用其他账户无法连接的快速解决方法
2024-01-17 05:12:53
Django 报错:Broken pipe from ('127.0.0.1', 58924)的解决
2021-03-27 21:12:09
原生js实现瀑布流效果
2023-09-04 07:11:02
JavaScript常用本地对象小结
2024-06-18 09:23:44
Mysql全局ID生成方法
2023-07-02 13:59:53