css 样式中的固定大小标题
我写过这样的样式: 但它在 IE 中效果不佳,
它在 IE 中显示如下: http://fb812yh3737x2812.byethost3.com/IE.png
但我想在 chrome 中像这样: http://fb812yh3737x2812.byethost3.com/chr.png
/*css template designed by AmzMohammad*/
body {
margin: 0px;
padding: 0px;
background: url(images/img01.jpg) repeat left top;
font: 14px B Nazanin, Helvetica, sans-serif;
color: #212121;
}
h1, h2, h3 {
margin-top: 0px;
}
h1 {
font-size: 3.0em;
}
h5 {
font: 45px "IranNastaliq","B Nazanin" ,Helvetica, sans-serif;
}
h7 {
margin-bottom: 0px;
font: 33px "Forte","Times New Roman (Headings CS)","Times Roman","Arial (Body CS)","Adobe Caslon Pro Bold","Agency FB","arial", Helvetica , sans-serif ;
}
h2 {
font-size: 1.8em;
}
h6 {
font-size: 1.1em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.0em;
}
p, ol, ul {
margin-bottom: 0em;
line-height: 160%;
}
a {
color: #393939;
}
a:hover {
text-decoration: none;
color: #393939;
}
a img {
border: none;
}
/* Header */
#header {
width: 900px;
height: 150px;
margin: 5px auto;
background: #393939;
}
#header a {
text-decoration: none;
color: #FFFFFF;
background: #393939;
}
/* Logo */
#logo {
float: left;
padding-left: 375px;
padding-right: 275px;
background: url(images/head.jpg) no-repeat left 100% ;
}
#logo h1, #logo p {
margin: auto;
line-height: normal;
font-weight: normal;
color: #393939;
}
#logo p {
padding-left: 0px;
}
#logo h1 {
padding: 25px 0px 0px 0px;
}
#logo h5 {
margin: 0px;
padding: 5px 0px 0px 0px;
}
#logo h7 {
margin-top: 0px;
padding: 5px 0px 0px 0px;
}
#logo h4 {
margin: 0px;
padding: 0px 0px 0px 0px;
}
#logo a {
color: #393939;
}
/* Menu */
#menu {
list-style: none;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 900px;
background: #393939;
}
#menu ul {
margin: 0px 0 0 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
font: 120% "B zar" ,"Adobe Arabic";
margin: 0;
padding: 0;
background: #393939;
}
#menu a {
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
background: #393939;
}
#menu a:hover {
background: #cff;
color:#393939;
color:#393939;
}
#menu .first {
background: none;
}
#menu .active a {
}
/* Page */
#page {
width: 900px;
margin: 3px auto;
padding: 30px 0px;
}
/* Content */
#content {
float: left;
width: 570px;
}
.post {
margin: 0px 0px 30px 0px;
}
.post .title {
margin: 0px;
padding: 0px 0px 5px 0px;
border-bottom: #BFC9AE dashed 1px;
color: #232F01;
}
.post .title a {
color: #232F01;
}
.post .entry {
}
.post .meta {
font-weight: bold;
}
.post .byline {
margin: 0px;
color: #5E5E5E;
}
/* Sidebar */
#sidebar {
float: left;
width: 300px;
}
#sidebar-bgtop {
height: 3px;
}
#sidebar-bgbtm {
height: 3px;
}
#sidebar-content {
padding: 0px;
}
#sidebar ul {
margin: 15px;
padding: 0px;
list-style: none;
}
#sidebar li ul {
margin-bottom: 1.8em;
list-style: none;
}
#sidebar li li {
padding: 5px 0;
border-bottom: #BFC9AE dashed 1px;
}
#sidebar h2 {
padding: 4px 20px;
background: #393939;
font-size: 1.2em;
color: #FFFFFF;
}
#sidebar a {
text-decoration: none;
color: #232F01;
}
#sidebar a:hover {
text-decoration: underline;
}
#sidebar h6 {
margin: 0px;
padding: 0px 0px 0px 0px;
}
/* Search */
#search {
}
#search form {
margin-bottom: 1.8em;
padding: 0px;
}
#search fieldset {
margin: 0px;
padding: 0px;
border: none;
}
#search #s {
width: 160px;
}
/* Footer */
#footer {
clear: both;
width: 900px;
height: 50px;
margin: 0px auto 30px auto;
color: #FFFFFF;
background: #393939;
}
#footer p {
margin: 0px;
padding: 19px 0px 0px 0px;
text-align: center;
line-height: normal;
font-size: smaller;
}
#footer a {
color: #FFFFFF;
}
欢呼:
为 header 的 html
<div id="header">
<div id="logo">
<h7 align="center">Mohammad Mahmoodi</h7>
<p>Department of Computer Engineering, Faculty of Engineering, University of Isfahan</p>
</div>
<!-- end #logo -->
<div id="menu">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<li><a href="Teaching.html">Teaching & Courses</a></li>
<li><a href="cv.html">Curriculum Vitae</a></li>
<li><a href="students.html">Students</a></li>
<li><a href="RI.html">Research Interests</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="other.html">attraction point</a></li>
<li><a href="font.html">Font</a></li>
<li><a href="farsi.html">Farsi</a></li>
</ul>
</div>
<!-- end #menu -->
</div>
I have written this styles:
but it doesnt works well in IE
it appear in IE like this: http://fb812yh3737x2812.byethost3.com/IE.png
but i wanna be like this in chrome : http://fb812yh3737x2812.byethost3.com/chr.png
/*css template designed by AmzMohammad*/
body {
margin: 0px;
padding: 0px;
background: url(images/img01.jpg) repeat left top;
font: 14px B Nazanin, Helvetica, sans-serif;
color: #212121;
}
h1, h2, h3 {
margin-top: 0px;
}
h1 {
font-size: 3.0em;
}
h5 {
font: 45px "IranNastaliq","B Nazanin" ,Helvetica, sans-serif;
}
h7 {
margin-bottom: 0px;
font: 33px "Forte","Times New Roman (Headings CS)","Times Roman","Arial (Body CS)","Adobe Caslon Pro Bold","Agency FB","arial", Helvetica , sans-serif ;
}
h2 {
font-size: 1.8em;
}
h6 {
font-size: 1.1em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.0em;
}
p, ol, ul {
margin-bottom: 0em;
line-height: 160%;
}
a {
color: #393939;
}
a:hover {
text-decoration: none;
color: #393939;
}
a img {
border: none;
}
/* Header */
#header {
width: 900px;
height: 150px;
margin: 5px auto;
background: #393939;
}
#header a {
text-decoration: none;
color: #FFFFFF;
background: #393939;
}
/* Logo */
#logo {
float: left;
padding-left: 375px;
padding-right: 275px;
background: url(images/head.jpg) no-repeat left 100% ;
}
#logo h1, #logo p {
margin: auto;
line-height: normal;
font-weight: normal;
color: #393939;
}
#logo p {
padding-left: 0px;
}
#logo h1 {
padding: 25px 0px 0px 0px;
}
#logo h5 {
margin: 0px;
padding: 5px 0px 0px 0px;
}
#logo h7 {
margin-top: 0px;
padding: 5px 0px 0px 0px;
}
#logo h4 {
margin: 0px;
padding: 0px 0px 0px 0px;
}
#logo a {
color: #393939;
}
/* Menu */
#menu {
list-style: none;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 900px;
background: #393939;
}
#menu ul {
margin: 0px 0 0 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
font: 120% "B zar" ,"Adobe Arabic";
margin: 0;
padding: 0;
background: #393939;
}
#menu a {
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
background: #393939;
}
#menu a:hover {
background: #cff;
color:#393939;
color:#393939;
}
#menu .first {
background: none;
}
#menu .active a {
}
/* Page */
#page {
width: 900px;
margin: 3px auto;
padding: 30px 0px;
}
/* Content */
#content {
float: left;
width: 570px;
}
.post {
margin: 0px 0px 30px 0px;
}
.post .title {
margin: 0px;
padding: 0px 0px 5px 0px;
border-bottom: #BFC9AE dashed 1px;
color: #232F01;
}
.post .title a {
color: #232F01;
}
.post .entry {
}
.post .meta {
font-weight: bold;
}
.post .byline {
margin: 0px;
color: #5E5E5E;
}
/* Sidebar */
#sidebar {
float: left;
width: 300px;
}
#sidebar-bgtop {
height: 3px;
}
#sidebar-bgbtm {
height: 3px;
}
#sidebar-content {
padding: 0px;
}
#sidebar ul {
margin: 15px;
padding: 0px;
list-style: none;
}
#sidebar li ul {
margin-bottom: 1.8em;
list-style: none;
}
#sidebar li li {
padding: 5px 0;
border-bottom: #BFC9AE dashed 1px;
}
#sidebar h2 {
padding: 4px 20px;
background: #393939;
font-size: 1.2em;
color: #FFFFFF;
}
#sidebar a {
text-decoration: none;
color: #232F01;
}
#sidebar a:hover {
text-decoration: underline;
}
#sidebar h6 {
margin: 0px;
padding: 0px 0px 0px 0px;
}
/* Search */
#search {
}
#search form {
margin-bottom: 1.8em;
padding: 0px;
}
#search fieldset {
margin: 0px;
padding: 0px;
border: none;
}
#search #s {
width: 160px;
}
/* Footer */
#footer {
clear: both;
width: 900px;
height: 50px;
margin: 0px auto 30px auto;
color: #FFFFFF;
background: #393939;
}
#footer p {
margin: 0px;
padding: 19px 0px 0px 0px;
text-align: center;
line-height: normal;
font-size: smaller;
}
#footer a {
color: #FFFFFF;
}
cheers
the html of header :
<div id="header">
<div id="logo">
<h7 align="center">Mohammad Mahmoodi</h7>
<p>Department of Computer Engineering, Faculty of Engineering, University of Isfahan</p>
</div>
<!-- end #logo -->
<div id="menu">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<li><a href="Teaching.html">Teaching & Courses</a></li>
<li><a href="cv.html">Curriculum Vitae</a></li>
<li><a href="students.html">Students</a></li>
<li><a href="RI.html">Research Interests</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="other.html">attraction point</a></li>
<li><a href="font.html">Font</a></li>
<li><a href="farsi.html">Farsi</a></li>
</ul>
</div>
<!-- end #menu -->
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
当您下载该字体时(因为我认为这不是标准字体),它可能采用 .TTF 格式,IE 并不总是识别这些文件,请尝试将其转换为 .EOT 并将其嵌入网站以获得更现代版本的IE 兼容性。
这通常只适用于 IE,但我想如果 chrome 已经识别它,你很可能适用于其他浏览器
When you downloaded that font, (because I assume that's not a standard font) it may have come in .TTF format, IE doesn't always recognise these files try converting it to .EOT and embed it on the site for more modern versions of IE compatibility.
This generally only works for IE but i suppose if chrome is already recognising it you will most probably be OK for other browser