Heim > Web-Frontend > HTML-Tutorial > 一个新的bug,关于首字下沉。求解决方案_html/css_WEB-ITnose

一个新的bug,关于首字下沉。求解决方案_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:58:02
Original
1260 Leute haben es durchsucht

关于ie6对first-letter伪类的样式支持问题

html代码如下:

 <p class="tit_f">                    HHONORY CERTIFICATE<br />                    <span>荣誉证书</span>                </p>
Nach dem Login kopieren

这是样式:
.tit_f:first-letter {font-size:30px;float:left;padding-top:10px;}
Nach dem Login kopieren


效果
火狐:

chrome:

ie6:


现在的问题是在IE6下无论怎么设置pading和margin都无法使首字母向下移怎么办?


回复讨论(解决方案)

话说星期天大家都放假了吗?

既然 火狐 和 chrome 的表现也不一样,那么也就没什么意义了

既然 火狐 和 chrome 的表现也不一样,那么也就没什么意义了


火狐和chrome可以用hack纠正,ie则完全没有办法啊,不是说ie支持first-letter伪类的吗?

大概思路就这样,如有差别数值调整一下:

<!doctype html><html><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        *{ margin:0; padding:0;}        .tit_f{}        .tit_f i{ position:relative;top:0;font-size:42px;float:left;font-style:normal;}        .tit_f span{font-size:14px;}    </style></head><body><p class="tit_f">    <i>H</i>HONORY CERTIFICATE<br />    <span>荣誉证书</span></p></body></html>
Nach dem Login kopieren
Nach dem Login kopieren

大概思路就这样,如有差别数值调整一下:

<!doctype html><html><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        *{ margin:0; padding:0;}        .tit_f{}        .tit_f i{ position:relative;top:0;font-size:42px;float:left;font-style:normal;}        .tit_f span{font-size:14px;}    </style></head><body><p class="tit_f">    <i>H</i>HONORY CERTIFICATE<br />    <span>荣誉证书</span></p></body></html>
Nach dem Login kopieren
Nach dem Login kopieren


谢谢!
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage