HTML/CSS - 随笔分类 - Younger

【CSS】文字超出显示省略号&连续字符换行

摘要：方法1.多行控制（css3）.text { width: 100%; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; ... 阅读全文

posted @ 2015-11-17 05:42 Younger 阅读(452) 评论(0) 推荐(0)

css 字体英文对照

摘要：宋体: SimSun黑体: SimHei华文细黑: STHeiti Light [STXihei]华文黑体: STHeiti微软雅黑: Microsoft YaHei微软正黑体: Microsoft JhengHei新宋体: NSimSun新细明体: PMingLiU仿宋: FangSong楷体: ... 阅读全文

posted @ 2014-11-21 16:36 Younger 阅读(299) 评论(0) 推荐(0)

CSS各浏览器HACK

摘要：/*firefox*/@-moz-document url-prefix(){.mainNews div.l ul{padding-bottom:12px}}/*ie6*/{_padding:2px;}/*ie7*/{*padding:4px;}/*ie10*/@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10-specific styles go here */}/*参考连接：http://www.css88.com/archives/5273*/.a{ /* 1. */ ... 阅读全文

posted @ 2013-12-25 23:05 Younger 阅读(211) 评论(0) 推荐(0)

Form 总结

摘要：禁止input自动完成下拉//ie:autocomplete="off" //ff:disableautocomplete 阅读全文

posted @ 2013-12-24 13:29 Younger 阅读(176) 评论(0) 推荐(0)

让html标签显示在页面上

摘要：用标签包起来，里面的所有文字会原样显示出来12输出：12 阅读全文

posted @ 2013-10-17 10:24 Younger 阅读(5139) 评论(0) 推荐(0)

PNG背景透明

摘要：.png{background:url(XX.png);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='XX.png');} 阅读全文

posted @ 2010-09-04 17:04 Younger 阅读(183) 评论(0) 推荐(0)

table中cellspacing、cellpadding的css替代写法

摘要：[代码]说明：border-collapse : separate | collapse separate :　默认值。边框独立（标准HTML） collapse :　相邻边被合并border-spacing : length 设置或检索当表格边框独立（例如当border-collapse属性等于separate时），行和单元格的边框在横向和纵向上的间距。当只指定一个length值时，这个值将... 阅读全文

posted @ 2010-07-27 16:35 Younger 阅读(55052) 评论(0) 推荐(4)

【min-height】最小高度 IE6、7、FF

摘要：tst{ min-height:173px;height:auto!important;height:173px;overflow:visible; } 阅读全文

posted @ 2010-07-22 11:38 Younger 阅读(188) 评论(0) 推荐(0)

【CSS Hack】针对浏览器内核

摘要：【FireFox】 @-moz-document url-prefix(){.className{color:#FFF}}【webkit内核：safari chrome】 @media screen and (-webkit-min-device-pixel-ratio:0){.className{color:#FFF}}【presto内核：opera】 @media all and (-web... 阅读全文

posted @ 2010-07-22 11:37 Younger 阅读(685) 评论(0) 推荐(0)

【图片预加载】

摘要：完整的兼容代码如下： <style>#preloader { background-image:url(img01.jpg); background-image:url(img02.jpg); background-image:url(img03.jpg); width:0; height:0; display:inline }/*IE6 7 Images you want to pr... 阅读全文

posted @ 2010-07-22 11:35 Younger 阅读(325) 评论(0) 推荐(0)

【图片等比缩放】CSS解决

摘要：img{max-width:100px;width:100px;width:expression(document.body.clientWidth>100"100px":"auto");overflow:hidden}max-width:100px —— IE7、FF等其他非IE浏览器下最大宽度为100px;width:100px —— 所有... 阅读全文

posted @ 2010-07-22 11:31 Younger 阅读(1360) 评论(0) 推荐(0)

input、select等Form标签对其问题

摘要：/*文字与form标签都设定vertical-align属性*/i,input{vertical-align:middle}<div><input type="checkbox"><i>注意为文字包上标签x</i></div> 同样适用于 radio \ text \ select \ button 等Form元素阅读全文

posted @ 2010-07-22 11:28 Younger 阅读(578) 评论(0) 推荐(0)

【实现三角】css的border属性解决方案

摘要：.to-top{ display:block; overflow:hidden; width:0; height:0; border:6px solid; border-color:#ccc #fff; border-width:6px 6px 0 6px;} 阅读全文

posted @ 2010-07-22 11:27 Younger 阅读(170) 评论(0) 推荐(0)

【透明、半透明】3中解决方案

摘要：这个效果在IE和Mozilla浏览器上都可以工作，代码如下 1.CSS 解决方案 .div{filter:alpha(opacity=50);opacity:0.5;}filter:alpha(opacity=50); —— IEopacity:0.5; —— FireFox2.JS 解决方案在IE中需要通过"filter"来定义透明度"opac... 阅读全文

posted @ 2010-07-22 11:23 Younger 阅读(211) 评论(0) 推荐(0)

【图片垂直居中】解决方案

摘要：<i class="i"><img src="http://p1.yokacdn.com/pic/index/121/2009/0318/U112P1T121D14F2761DT20100204144100.jpg" /></i>.i {display: table-cell;vertical-align:middle; text-align:center;*d... 阅读全文

posted @ 2010-07-22 11:22 Younger 阅读(206) 评论(0) 推荐(0)

Duplicate Characters Bug 【IE6 Bug】

摘要：在IE中的HTML注释引起文字奇怪的复制，当多个浮动的元素彼此跟随，中间加注释的时候，最后一个浮动元素内的文本偶尔会复制到最下面去。学名Duplicate Characters Bug 可以通过以下的办法来解决： 1、不放置注释。最简单、最快捷的解决方法； 2、注释不要放置于2个浮动的区块之间； 3、将文字区块包含在新的<div></div>之间，如：<div... 阅读全文

posted @ 2010-07-22 11:20 Younger 阅读(187) 评论(0) 推荐(0)

解决IE6下CSS背景图片闪烁的Bug

摘要：div，设置了背景图，然后只要在js中对此div的css做出任何更改就会重新请求背景图片，表现为页面闪烁，此问题仅在IE6下出现(更低版本未测试)，原因是IE6在默认情况下不缓存背景图片。解决办法一，通过css： html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} 缺点：可... 阅读全文

posted @ 2010-07-22 11:12 Younger 阅读(536) 评论(0) 推荐(1)

【expression】在CSS中降低效率的问题

摘要：CSS 内的 expression 会反复执行，有严重的效率问题。解决方法：在 expression 中把 CSS 中用来触发的属性重写一下：这里用 zoom 触发，搞定之后把 zoom 写回 1，这下就没效率问题了吧。同理，其他针对 IE 的 hack，如果是只跑一次的 expression，都可以这样做。阅读全文

posted @ 2010-07-22 11:10 Younger 阅读(336) 评论(0) 推荐(0)

中文自动被折行问题

摘要：p {display:inline-block;}或：p{white-space:nowrap;}/*111111111111111111111111111111连续字符自动换行问题*/.auto-wrap{word-wrap:break-word;word-break:break-all;}/*强制文字不换行*/.no-wrap{white-space:nowrap;}/*ie6 定位错乱问题*/.fix-ie6-position{position:relative;_zoom:1} 阅读全文

posted @ 2010-07-22 11:08 Younger 阅读(224) 评论(0) 推荐(0)

letter-spacing与word-spacing属性详解

摘要：【Top is. letter-spacing】应用letter-spacing属性后，每一个中文文字以及英文字母之间，都被隔开了所设置的距离，说明此属性在我们控制字距的时候是非常有用的。【Top is. word-spacing】应用word-spacing属性后，中文文字之间的距离没有发生任何变化，而第二行的“CSS Web Design”这三个单词之间的距离产生了效果，被隔开了所设置的距离。说明此属性在英文文档中比较有效的隔开单词的间距，对中文就无能为力了，或许因为中文是没有单词这一概念的文字形式。我们在实际布局中，如果需要对英文单词设置间隔，可以用word-spacing属性。如果是对阅读全文

posted @ 2010-07-22 11:06 Younger 阅读(1071) 评论(0) 推荐(0)

随笔分类 - HTML/CSS