摘要： 因为这是一个CSS3属性，且长期以来都必须用vendor前缀。border-box实际上就是IE quirk mode下的box model。而box-sizing属性也是为了兼容这一模型在FF 1.0中就被加入了。其他浏览器，Safari从3.0开始，Chrome从1.0开始就支持了。讽刺的是，问题居然还是出在IE上。IE6和7的标准模式下没有box-sizing。这意味着你的网页如果要使用box-sizing: border-box，必须使用quirk mode。calc() 终于已经得到了广泛支持，box-sizing在避免无意义标签方面的不可替代性就随之消失了。考虑到box-sizin 阅读全文

摘要： 1 active不是select2触发事件 利用activate $( ".selector" ).tabs({ activate: function( event, ui ) { ...... } }); 初始化后使用事件绑定绑定该事件： ( ".selector" ).on( "tabsactivate", function( event, ui ) { ui.oldTab ui.oldPanel ui.newTab ui.newPanel });1.属性地址：http://my.oschina.net/zhengjian/blo 阅读全文

摘要： IE 选择器 Hack3 /* IE 6 and below */* html .selector {}.suckyie6.selector {} /* .suckyie6 can be any unused class */ /* IE 7 and below */.selector, {}34 /* IE 7 */*:first-child+html .selector {}.selector, x:-IE7 {}*+html .selector {}?/* Everything but IE 6 */html > body .selector {}3 /* Everything b 阅读全文

摘要： http://www.daqianduan.com/example/?pid=4258实例: CSS巧妙实现分隔线的几种方法 -- 大前端实例: CSS巧妙实现分隔线的几种方法 -- 大前端« CSS巧妙实现分隔线的几种方法小小分隔线 单标签实现小小分隔线 巧用色实现小小分隔线 inline-block实现小小分隔线 浮动来实现———————————小小分隔线 字符来实现———————————— 阅读全文

摘要： 一、文不在长，有货则灵图片式按钮的文字隐藏看来是大家都比较关注的一个问题（分享讨论、微博转发等可见一斑），text-indent负值为最常用方法，然问题有三：较大的负值有性能问题，例如新浪/腾讯微博提交按钮的-9999em，大概12~16万像素的宽度，相对于100个显示器宽度，在低配Android pad上，尤其含动画效果的时候，会直接卡爆；FireFox浏览器下虚框。其实问题不大，overflow:hidden可修复；不能应用在IE6/IE7伪inline-block水平元素上，否则元素会被text-indent拐走。即使有人提出：{ text-indent: 100%; white-spa 阅读全文

摘要： 例代码:使用@media实现IE hack的方法...仅IE6和IE7识别@media screen\9 { .selector { property: value; } } 仅IE6和IE7、IE8识别@media \0screen\,screen\9 { .selector { property: value; } } 仅IE8识别@media \0screen { .selector { property: value; } } 仅IE8-10识别@media screen\0 { .selector { property: value; } } 仅IE9和I... 阅读全文

摘要： html code:<li data-icon="a" class="col one-third step " id="plan"><h4>Plan</h4></li>css code:background:none repeat scroll 0 0 #D3404A;border-radius:2.67em 2.67em 2.67em 2.67em;color:#FFFFFF;content:attr(data-icon); //图片关键方法display:inline-block;f 阅读全文

摘要： code:.ranking_list li{ position:relative;}.ranking_list li:before{ counter-increment:ranking_list_li; content:counter(ranking_list_li); color:#ffffff; position:absolute; left:0; top:7px; width:18px; height:15px; background:#818181; line-height:normal; text-align:center; font-size:10px;}.ranking_list 阅读全文

摘要： 看代码：!DOCTYPE HTML>模拟宽度自适应的输入框模拟宽度自适应的输入框模拟input的自适应：模拟textarea的自适应：可以发现一个非常讨厌的地方就是：textarea 和 input 文本输入框的边框是用套在其外层的容器的border来模拟的，textarea 和 input 文本输入框的本身边框 border:0 none。这样webkit下输入框focus后，输入框的边框在模拟的边框里面，体验上有点不爽。还有一点非常值得注意的是：textarea的padding和margin一定要重置为0，否则在webkit和opera下会有细小的bug。查看demo：http:// 阅读全文

摘要： 最近一个细节引起了我的注意，chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框，而且textarea还可以任 意拖动放大，这是不能容忍的，影响美观不说，有时候拖动textarea还会使页面布局错乱，所以决定重置这些样式。这是大前端调整的样式，样式统一就是 好看，o(∩_∩)o 哈哈····看代码：取消chrome下input和textarea的聚焦边框：input,button,select,textarea{outline:none}取消chrome下textarea可拖动放大：textarea{resize:none}最 阅读全文