Welcome 微信登录

首页 / 脚本样式 / CSS

不同版本IE使用不同css(css条件注释语句用法)

不同版本IE使用不同css(css条件注释语句用法)

一、条件注释简介1.IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法。2.条件注释只能用于IE5以上。3.如果你安装了多个IE,条件注释将会以最高版本的IE为标准。4.条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。5.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里...
网页使用Google Font API(字体)的方法

网页使用Google Font API(字体)的方法

在网页设计里,字体的显示是个问题。最普遍用的是宋体,但是宋体在 Win 7 下的表现真的很难看。雅黑端庄一些,但是随着字体大小,感觉汉字的大小也会有区别。小站现在用的字体是是宋体 + Arial/Georgia,因为习惯了也没多在意,其实对于英文字体有其它更好的选择。比如 Bitter 字体,用来做标题倒是不错:复制代码 代码如下:<div style="text-align:center; font-size:24px; font-family:B...
IE里button设置border:none属性无效解决方法

IE里button设置border:none属性无效解决方法

某个元素设置无边框,只需要给元素设置border:none即可,当然设置border:0效果一样,但实际上两者是有性能差别的复制代码 代码如下:border:none:边框设置为为none,不做任何处理;border:0:边框宽度设置为0像素,但是实际上border-color和border-style还是在渲染的。然而在IE中,对于button和input元素确并不是这样,在IE6,7中border:none仅等价于border-style:none,而...
html清除浮动的6种方法示例

html清除浮动的6种方法示例

使用display:inline-block会出现的情况:1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签由于inline-block属性换行的时候被解析(有间隙)故解决方法使用浮动float:left/right使用浮动时出现的情况:1.使块元素在一行显示2.使内嵌元素支持宽高3.不设置不宽高的时候宽度由内容撑开4.换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动)5.元素添...
三个不常见的 HTML5 实用新特性简介

三个不常见的 HTML5 实用新特性简介

一、DNS 预解析缓存众所周知,解析 DNS 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来。特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。如果采用 DNS 预加载,支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下,而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单:复制代码 代码如下:<link rel="...
css代码优化的12个技巧

css代码优化的12个技巧

1.ID 规则2.Class 规则3.标签规则4.通用规则对效率的普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始,虽然该书中罗列的更加详细,但你也可以在这里查看完整的引用列表,也可以在谷歌的《高效CSS选择器的最佳实践》中查看更多的细节。本文我想分享一些我在编写高性能CSS中用到的简单例子和指南。这些都是受到MDN 编写的高效CSS指南的启发,并遵循类似的格式。一、避免过度约束一条普遍规则,不要添加不必要的约束。复制...
低版本IE正常运行HTML5+CSS3网站的3种解决方案

低版本IE正常运行HTML5+CSS3网站的3种解决方案

如果开发时按最低标准,比如IE6不支持的特性,我们统统不用,那就没有必要写这篇文章了;但我想这种情况极少,更多的开发,是在现代浏览器上使用它们支持的特性,而在早期浏览器上做一定的降级处理,这就是所谓 “渐进增强”,也是本文要说的重点。通过下面的方法,希望可以让网站也能够在低版本IE浏览器上奇迹般地运行得更好!htmlshiv.jsRemy的 HTML5shiv通过JavaScript 来创建HTML5元素(如 main, header, footer等)。...
CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

现在的浏览器IE6-IE10、Firefox、Chrome、Opera、Safari。。。数量众多,可谓百家争鸣,对用户来说有了很多的可选择型,不过这可就苦了Web前端开发人员了。今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器。如图所示:下面就来看一下代码吧:html部分:复制代码 代码如下:<div class="c...
ie6,ie7,ie8完美支持position:fixed的终极解决方案

ie6,ie7,ie8完美支持position:fixed的终极解决方案

ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动;以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并不会闪烁。 复制代码 代码如下:<div id="goTop_div" class="fixed ie"> </div>css: 复制代码 代码如下:.fixed{ position:fixe...
html小技巧之td,div标签里内容不换行

html小技巧之td,div标签里内容不换行

在一些页面开发中,除自己操作外,引起换行的情况一般有:Ex一.td标签里内容长度过长引起换行;Ex二.div标签(或其他标记)里内容有文本和图片引起换行;解决方法: 针对例子一用<nobr></nobr>标签把换行的内容全部包起来,可以解决问题; 针对例子二用CSS样式white-space: nowrap;可以使图片和内容不换行,(经自己测试使用<nobr></nobr>标签也可以)....
li中插入img图片间有空隙的解决方案

li中插入img图片间有空隙的解决方案

直接加样式img{vertical-align:bottom; display:block}当然在某些情况下无效,比如我要加三个图片,上中下,中间的图片是设为背景,发现用此方法无效,只是上和中的图片空隙没了,而下与中之间还存在,方法很简单,把vertical-align:bottom改成top,可根据自己遇到的不同情况来设vertical-align的参数方法一:复制代码 代码如下:img{vertical-align:top; display:block...
<< 41 42 43 44 45 46 47 48 49 50 >>