大家在写CSS是有哪些兼容性处理技巧？怎么使用CSS制作悬停效果的技巧

本文目录

• 大家在写CSS是有哪些兼容性处理技巧
• 怎么使用CSS制作悬停效果的技巧
• 前端如何快速寻找到css样式的位置
• css技巧：批量保存div+css网页中的图片的几种方法

大家在写CSS是有哪些兼容性处理技巧

1.区别IE和非IE浏览器CSS HACK代码#divcss5{background:blue; /*非IE 背景蓝色*/background:red \9; /*IE6、IE7、IE8背景红色*/}2.区别IE6,IE7,IE8,FF CSS HACK【区别符号】：「\9」、「*」、「_」【示例】：#divcss5{background:blue; /*Firefox 背景变蓝色*/background:red \9; /*IE8 背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。3.区别IE6、IE7、Firefox (EXP 1)【区别符号】：「*」、「_」【示例】：#divcss5{background:blue; /*Firefox背景变蓝色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox4.区别IE6、IE7、Firefox (EXP 2)【区别符号】：「*」、「!important」【示例】：#divcss5{background:blue; /*Firefox 背景变蓝色*/*background:green !important; /*IE7 背景变绿色*/*background:orange; /*IE6 背景变橘色*/}【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。5.区别IE7、Firefox【区别符号】：「*」、「!important」【示例】：#divcss5{background:blue; /*Firefox 背景变蓝色*/*background:green !important; /*IE7 背景变绿色*/}【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。7.区别IE6、IE7 (EXP 2)【区别符号】：「!important」【示例】：#divcss5{background:black !important; /*IE7 背景变黑色*/background:orange; /*IE6 背景变橘色*/}【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。8.区别IE6、Firefox 【区别符号】：「_」【示例】： #divcss5{background:black; /*Firefox 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} 【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。以上包括了IE6\IE8\IE7\火狐浏览器兼容问题及解决方法。

怎么使用CSS制作悬停效果的技巧

《!DOCTYPE html》《html lang=“en“》《head》 《meta charset=“UTF-8“》 《title》Document《/title》 《style》 *{margin:0;padding:0;} ul{list-style-type: none;} ul》li{float:left;margin-right: 10px;position: relative;width:100px;} li》span{display: none;position: absolute;top: 20px;background: #ccc;} li:hover 》span{display: block;} 《/style》《/head》《body》 《ul》 《li》提示《span》任务中心《/span》《/li》 《li》提示《span》通知《/span》《/li》 《li》提示《span》装扮《/span》《/li》 《/ul》《/body》《/html》

前端如何快速寻找到css样式的位置

CSS样式实现快速定位bug的六大技巧1、检查是否清除浮动其实有不少的CSSBUG问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用无额外HTML标签的清除浮动的方法（尽量避免使用overflow:hidden;zoom:1的类似方法来清除浮动，会有太多的限制性）。2、检查IE下是否触发haslayout很多的IE下复杂CSS BUG都与IE特有的haslayout息息相关。熟悉和理解haslayout对于处理复杂的CSSBUG会事半功倍。推荐阅读old9翻译的《Onhavinglayout》（如果无法翻越穿越伟大的GFW，可阅读蓝色上的转帖）快捷提示：如果触发了haslayout，IE的调试工具IEDeveloperToolbar中的属性中将会显示haslayout值为-1。3、边框背景调试法故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试CSSBUG的方法之一，对于复杂BUG依旧适用。经济实惠还环保.4、检查页面的标签是否闭合不要小看这条，也许折腾了你两天都没有解决的CSS BUG问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。快捷提示：可以用Dreamweaver打开文件检查，一般没有闭合的标签，会黄色背景高亮。5、样式排除法有些复杂的页面也许加载了N个外链CSS文件，那么逐个删除CSS文件，找到BUG触发的具体CSS文件，缩小锁定的范围。对于刚才锁定的问题CSS样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。6、模块确认法有时候我们也可以从页面的HTML元素出发。删除页面中不同的HTML模块，寻找到触发问题的HTML模块。

css技巧：批量保存div+css网页中的图片的几种方法

直接用浏览器的另存为已经不能完全保存到本地 我在网上收集了一些方法，和一些自己的实践，希望对你有所帮助 第一：苦力型 查看网页源文件，然后找到css路径，直接输入到ie地址框内下载既可。打开css找出里面的图片一个一个下载 第二：偷懒型 保存到本地css后，在dw中把css中的图片都替换成