在处理浏览器兼容性问题时，你有没有发现在IE9中浏览DIV CSS网页文字字体偏上方，设置文字垂直上下居中line-height样式失效，而其它浏览器包括ie6-ie8均正常，究竟什么原因造成，如何解决与避免在ie9浏览器line-height失效。一、ie9 line-height失效原因CSS中使用了中文字体，而中文字体使用汉字。如：font-family:"微软雅黑"。使用CSS字体font-family样式使用了“宋体”、“黑体”或“微软雅黑”等中文字体以汉字设置于CSS中。在网...
这次给大家带来opacity透明度滤镜的IE兼容解决方法，使用opacity透明度滤镜的注意事项有哪些，下面就是实战案例，一起来看一下。CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天...
这次给大家带来Calc滚动条出现页面不跳动的解决方法，解决Calc滚动条出现页面不跳动的注意事项有哪些，下面就是实战案例，一起来看一下。什么是calc()?calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式...
stricky footer设计是最古老和最常见的效果之一，我们都曾经历过如果页面内容不够长的时候，页脚块粘贴在底部；如果内容足够长时，页脚块会被内容向下推送。本文主要和大家介绍stricky footer的三种解决方案详解的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。这些天做vue+express实战的练习，跟着黄轶老师倒是认识了stricky footer，就认真的了解学习了一下，但是前...
有三种原因会造成html网页乱码原因。那么我们今天来说一下三种不同的产生原因以及三种问题的解决方案。造成html网页乱码原因主要是html源代码内中文字内容与html编码不同造成。但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码。乱码造成原因 1、比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。2、html网页编码是gbk，而程序...
在CSS中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align: center ;如果它是一个块级元素，就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。 多年以来，垂直居中已经成为了CSS领域的圣杯，它同样也是前端开发圈内广为流传的笑话。原因在于它同时具备以下几条特征： 1）它是极其常见的需求。 2）从理论上来看，...
错误写法 将visited写在hover和active之后，例如：.ui-page-theme-a .digilinx-ui-btn{background:#00a325;border-color:#00891f;color:#FFF;text-shadow: 0 1px 0 #00a325;} .ui-page-theme-a .digilinx-ui-btn:hover{background:#00891f;border-color:#00721a;color:#FFF;text-shadow: 0 1px 0 #00891f;} .ui-page-theme-a .digilinx-ui-btn:active{background:#00721a;border-color:#005c15;color:#FFF;text-shadow: 0 1px 0 #0...
我们在进行页面架构的时候，一般会分成三个section：header、body、footer。如下面这个页面：这个时候我们就需要对body部分进行最小高度设置，才能避免footer部分出现在页面中间的情况。比方说下面在这个写法：.page-content-header { min-height: 5%; } .page-content-body { min-height: 100%;} .page-content-footer { min-height: 5%;}这样的写法会让body部分有个充满页面大小的高度，footer部分自然会...
今天突然有人问我滚动条css自定义的方法，我发现用scrollbar-base-color这种方法只有ie支持，查了半天资料总结如下！！！ IE浏览器中自定义滚动条样式： HTML { scrollbar-base-color: #C0C0C0; scrollbar-base-color: #C0C0C0; scrollbar-3dlight-color: #C0C0C0; scrollbar-highlight-color: #C0C0C0; scrollbar-track-color: #EBEBEB; scrollbar-arrow-color: black; scrollbar-shadow-color: #C0C0C0; ...
1.关于元素的 width属性无效果 先运行下程序看下: [html] <span style=background-color:#336699;width:300px;>123</span> [/html] 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 1.关于元素的 width属性无效果 先运行下程序看下: 提示：您可以先修改部分代码再运行可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内联元素(可以是默认即为内联...
属性定义及使用说明字体简写属性在一个声明中设置所有字体属性。可以设置的属性是（按顺序）：“font-style font-variant font-weight font-size / line-height font-family”字体大小和字体家庭的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。css中font属性问题，字体和行高 前面 先设置的是 font-size, 后面才是 line-height;刚刚在chrome测试了下 ，单独写 font: 10px/1.5em; 是无效的。但是 在后面加上f...
今天测试项目的时候发现opacity属性不兼容ie8,最后上网查了一下发现使用下面的属性就可以解决了，很开心！css: filter:Alpha(Opacity=50)/*这是IE的私有属性，只适用于IE*/要想兼容各大浏览器使用以下属性就可以了opacity: 0.5; /* 支持CSS3的浏览器（主流）*/-moz-opacity:0.5; /* Firefox私有属性*/filter:alpha(opacity=50); /* IE私有属性，仅适用于IE*/以上就是opacity不兼容ie8的问题解决方法的详细内容，更多请关注Gx...
如何清楚浮动（一） 已知一个大的div容器，这个容器包含了两个子div容器，然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器)，清楚浮动的div容器设置css样式为clear:both，此时，大的div标签的内部(左右两边/*css5*/)浮动就清除了。 如果有一个大的div容器<div class="divcss5"> </div> ，这个大的div包含了一个子div容器<div class="clear"></div>，子div容器设置一个宽度、高度、背景色，不设置内、...
img[src=""] img标签无路径情况下，灰色边框去除解决方案1.Js解决办法<html><head><meta charset="UTF-8"><title></title></head><body><img src="error.jpg" onerror="whenError(this)"></body><script>function whenError(a){a.onerror=null;a.src=path_default.jpg;console.log(图片出错的时候调用默认的图片);}</script> </html>2.绝对定位聚焦解决方案<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>absolute聚焦...
小窗口时CSS背景图出现右侧空白BUG的解决方法（兼容各浏览器）解决办法：在css内加入如下两行代码，让它自己判断：width:expression(document.body.clientWidth <= 960? "960px": "auto");min-width:960px;即：.top{border:0px solid #f00;width:expression(document.body.clientWidth <= 960? "960px": "auto");min-width:960px;height:29px;margin:0px;padding:0px;url(.. /img/topbar.png) repeat-x; }ok，这个bug终于解决了。以...