HTML语法中TITLE属性在字体加粗下的兼容性难题

最近为公司建一个产品博客,程序依然选择wordpress,其中出现了不少问题,有一个比较经典的拿来一说:

模板的css中,body{font:13px/18px 微软雅黑,宋体,Arial,Verdana,serif,Tahoma,Helvetica;color:#555; line-height:1}定义了全文字体,包括logo部分的字体,和正文,但是我需要将logo部分的字体进行加粗显示,直接改这段css没有成功。

于是想到了以下做法:在header.php文件中直接修改title。

1.标准写法如下:

<a href="https://blog.axiaoke.cn/" title=" 某某博客">某某博客</a>

可以在IE6~IE9、Firefox、Chrome、Opera等浏览器下正确展示。

2.当标题需要字体加粗时问题就出现了:

<a href="https://blog.axiaoke.cn/" title=" 某某博客"><strong>某某博客</strong></a>

可以在IE6、Firefox、Chrome、Opera等浏览器下正确展示,但IE9无法正确展示。

3.在IE9下要展示需要以兼容模式运行

且<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />兼容模式标签是不起作用的。

无论重复添加ALT标签,用SPAN、DIV都无法解决该问题。

4.多次尝试后,能解决TITLE兼容性的写法如下:

<a style="font-weight: bold;" title=" 某某博客" href="https://blog.axiaoke.cn/">某某博客</a>

可以在IE6~IE9、Firefox、Chrome、Opera等浏览器下正确展示,无需设置IE9的兼容性视图设置。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

返回主页看更多
打赏博主 支付宝 扫码打赏