css
kongjiea
通吃前后端如何?
展开
-
css中font的简写方法(包括font-weight,font-size,line-height,font-family)
font:字体粗细 字体大小/行高 字体样式例子:font: bold 12px/18px Arial, Helvetica, sans-serif ;原创 2013-12-12 14:00:42 · 5145 阅读 · 0 评论 -
css画空心箭头
css画空心箭头 .hot-point-title { width: 30px; height: 38px; border:1px solid #999; position: relative;}.hot-point-title .arrow { position: absolute; right: -12px; top:原创 2015-02-12 15:49:13 · 3721 阅读 · 0 评论 -
条件注释判断IE浏览器,<!--[if IE]>条件注释区分非IE浏览器
Only IE 所有的IE可识别 Only IE 5.0 只有IE5.0可以识别 Only IE 5.0+ 高于IE5.0都可以识别 Only IE 6- 低于IE6可识别 Only IE 6/+ IE6以及IE6以上都可识别 Only IE 7/- IE7及ie7以下版本可识别lte:就是Less than or equal to的简写原创 2014-09-17 14:10:31 · 5887 阅读 · 0 评论 -
ie6、7、8、9单独hack兼容写法
styletypestyletype=”text/CSS”> #body{ border:2pxsolid#00f;/*Firefox的属性*/ border:2pxsolid#090\9;/*IE6/7/8的属性*/ border:2pxsolid#F90\0;/*IE8支持*/ _border:2pxsolid#f00;/*IE6的属性*/ }原创 2014-10-13 11:06:04 · 6110 阅读 · 0 评论 -
常用的CSS Hack技术集锦
一、什么是CSS Hack?不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。1、属性级转载 2015-04-07 15:19:42 · 827 阅读 · 0 评论 -
css hack全解,最齐全的ie css hack方式讲解
CSS hack分类CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。属性前缀法(即类内部Hack):例如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\原创 2015-01-12 13:23:56 · 7576 阅读 · 0 评论 -
IE的layout属性详解
要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清除的概念。大多 IE下的显示错误,就是源于 haslayout。什么是 haslayout ?haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中,一个元素要么自己对自身的内容进行计算大小转载 2015-05-08 12:02:37 · 1097 阅读 · 0 评论 -
CSS解决图片下面有空隙的简单方法
在用CSS制作网页过程中可能会碰到图片下面有空隙的问题,本文给出了最为简单的解决方法。解决方法:在图片的css中加 vertical-align:bottom; 效果转载 2015-05-27 16:37:47 · 11070 阅读 · 0 评论 -
css在用空元素、无内容的元素布局不兼容ie7/8
问题环境描述如图就是简单的一张图片,x的关闭按钮是用i标签来布局实现的, 代码如下:html: 关闭 css:.popBox_13{position:absolute;z-index:1003;top:50%;left:50%;margin:-310px 0 0 -380px;} .popBox_13 .innerWrap{position:原创 2015-07-09 17:45:21 · 1344 阅读 · 0 评论 -
css去掉a标签点击时候的虚线框
body a{outline:none;blr:expression(this.onFocus=this.blur());}原创 2014-09-17 15:20:08 · 1373 阅读 · 0 评论 -
注意编码:html代码预览中多出一行””引号,而源码里找不到
今天同学问我他的网站里多出来一行,f12查看发现代码里多出了个引号,而在程序源码里是看不到这行代码,也看不到引号 如下图是转编码出的问题解决办法,就是检查编码。去掉“unicode 签名(BOM)”如下图去掉“unicode 签名(BOM)”前面的勾 然后保存一下使用sublime写代码的时候也会有不注意编码的问题。 注意查看下面2个原创 2016-09-06 22:15:09 · 1849 阅读 · 0 评论 -
纯 CSS 打造 Flow-Steps 面包屑导航
Flow-Steps 导航效果常用于需要表示执行步骤的交互页面,效果图如下:通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重新切图,这里介绍使用纯 CSS 的方法来实现 Flow-Steps 效果:兼容版本此版本兼容主流的浏览器(IE6、7、8… FF、chrome),但也因此导致 HTML 结构比较复杂,并且使用了转载 2015-02-10 12:01:47 · 1482 阅读 · 0 评论 -
多行文本溢出显示省略号...
定位元素实现多行文本截断p { position: relative; line-height: 18px; height: 36px; overflow: hidden;}p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; ...原创 2014-10-14 14:25:07 · 2904 阅读 · 0 评论 -
清除过浮动方法 清除浮动大全
浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 (Enclo转载 2013-12-27 16:50:35 · 13267 阅读 · 4 评论 -
css 等高布局
CSS等高布局 *{ margin:0; padding:0;}#wrap{ overflow:hidden; width:1000px; margin:0 auto;}#left,#center,#right{ margin-bottom:-9999em; padding-bottom:9999em;}#left{ float:left; wid原创 2014-06-06 11:05:58 · 1030 阅读 · 0 评论 -
css base 重置样式
@charset "utf-8";/* CSS Document *//* CSS重置 */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}body{ font-si原创 2014-07-19 15:37:57 · 1404 阅读 · 0 评论 -
修改select边框颜色 兼容ie
无标题文档 1 2 3 4 5原创 2014-07-21 16:40:58 · 8839 阅读 · 0 评论 -
多行文本垂直居中
多行文字实现垂直居中 body { font-size: 12px; font-family: tahoma; } div#wrap { display: table;原创 2014-07-14 15:44:32 · 818 阅读 · 1 评论 -
如何让ie兼容max-height,和min-height属性
IE6支持最大宽度:.yangshi{max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)原创 2014-09-19 14:38:30 · 5245 阅读 · 0 评论 -
设置embed flash的层级(透明度) wmode="transparent, 移动端flash自适应宽高
wmode="transparent原创 2014-10-23 18:34:23 · 5959 阅读 · 0 评论 -
行级元素高度不一致,并列垂直居中,如span,和input
行级元素高度不一致,并列垂直居中 .box {background: #999;} .box input{height:30px;line-height:30px;border:1px solid #999;vertical-align:middle;} aaaa sdfbb原创 2014-10-13 12:53:58 · 13746 阅读 · 0 评论 -
ie6 7 8设置select的高度
兼容IE6/IE7/IE8/火狐---下拉菜单select高度.standard_select{ /*边框*/ display:inline-block; border:solid 1px #E3E9EF; border-top-color:#ABADB3; padding:5px; /*调整此处改变select高度*/}.select_shelt原创 2014-10-13 11:16:23 · 5134 阅读 · 0 评论 -
全局global.css的写法
@charset "utf-8";/* CSS Document *//* CSS重置 */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}body{ font-si原创 2015-01-11 19:31:06 · 5903 阅读 · 0 评论 -
ie6/7块级元素兼容inline-block写法
类似div的块级元素就算设置了 display:inline-block在ie6、7中如果没设置width就独占一行解决方法一:*display:inline;*zoom:1; 一定要写在 display:inline-block后面解决方法二:添加float:left原创 2015-01-12 12:43:43 · 1334 阅读 · 0 评论 -
css制作实心、空心arrow箭头
使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码效果图:代码: lang="en"> charset="UTF-8"> Document type="text/css"> /*实心箭头*/ .sx-arrow-down{ border-style:s原创 2016-09-06 22:10:58 · 11135 阅读 · 0 评论