chown命令： 可以用来改变linux文件的所有者，用到这个，是因为交替使用ftp和winscp上传文件，而且使用了不同的用户，导致经常出现上传失败。 css的 line-height： 很多浏览器默认line-height的值是font-size的120%，也有是100%的，所有应该考虑reset一下。 php的日期比较： 过程化方法：date_diff 对象化方法：DateTimeObject->diff 这个没有.net那么舒服，有个TimeSpan，要获取相差多少天，多少秒的，真心麻烦。 直接上代码: 1: public static function datediff($dt_menor, $dt_maior, $str_interval, $relative=false) { 2: if (is_string($dt_menor)) 3: $dt_menor = date_create($dt_menor); 4: if (is_string($dt_maior)) 5: $dt_maior = date_create($dt_maior); 6:  7: $diff = date_diff($dt_menor, $dt_maior, !$relative); 8:  9: switch ($str_interval) { 10: case "y": 11: $total = $diff->y + $diff->m / 12 + $diff->d / 365.25; 12: break; 13: case "m": 14: $total = $diff->y * 12 + $diff->m + $diff->d / 30 + $diff->h / 24; 15: break; 16: case "d": 17: $total = $diff->y * 365.25 + $diff->m * 30 + $diff->d + $diff->h / 24 + $diff->i / 60; 18: break; 19: case "h": 20: $total = ($diff->y * 365.25 + $diff->m * 30 + $diff->d) * 24 + $diff->h + $diff->i / 60; 21: break; 22: case "i": 23: $total = (($diff->y * 365.25 + $diff->m * 30 + $diff->d) * 24 + $diff->h) * 60 + $diff->i + $diff->s / 60; 24: break; 25: case "s": 26: $total = ((($diff->y * 365.25 + $diff->m * 30 + $diff->d) * 24 + $diff->h) * 60 + $diff->i) * 60 + $diff->s; 27: break; 28: } 29: if ($diff->invert) 30: return -1 * $total; 31: else 32: return $total; 33: }

最近是累了点，懒了点。 一个div元素，点击，页面外的元素，隐藏此div。 1: $(document).mouseup(function (e) 2: { 3: var container = $("YOUR CONTAINER SELECTOR"); 4:  5: if (!container.is(e.target) // if the target of the click isn't the container... 6: && container.has(e.target).length === 0) // ... nor a descendant of the container 7: { 8: container.hide(); 9: } 10: }); jquery.bxslider 是一个很不错的插件。 目前的版本是4+，使用过程中，碰到了几个bug. 如果刚好slider正在切换[gotoprev,gotonext]的时候，进行重绘[redraw]，会造成slider停止工作。修复代码如下： 修改前： 1: el.redrawSlider = function () { 2: // resize all children in ratio to new screen size 3: slider.children.add(el.find('.bx-clone')).width(getSlideWidth()); 4: // adjust the height 5: slider.viewport.css('height', getViewportHeight()); 6: // update the slide position 7: if (!slider.settings.ticker) setSlidePosition(); 8: // if active.last was true before the screen resize, we want 9: // to keep it last no matter what screen size we end on 10: if (slider.active.last) slider.active.index = getPagerQty() - 1; 11: // if the active index (page) no longer exists due to the resize, simply set the index as last 12: if (slider.active.index >= getPagerQty()) slider.active.last = true; 13: // if a pager is being displayed and a custom pager is not being used, update it 14: if (slider.settings.pager && !slider.settings.pagerCustom) { 15: populatePager(); 16: updatePagerActive(slider.active.index); 17: } 18: } 修改后： 1: el.redrawSlider = function () { 2: if (slider.working) { 3: // Wait 'speed' amount of time before redrawing 4: setTimeout(function () { el.doRedrawSlider(); }, slider.settings.speed); 5: } else { 6: // Redraw immediately 7: el.doRedrawSlider(); 8: } 9: }; 10:  11: el.doRedrawSlider = function() { 12: // resize all children in ratio to new screen size 13: slider.children.add(el.find('.bx-clone')).width(getSlideWidth()); 14: // adjust the height 15: slider.viewport.css('height', getViewportHeight()); 16: // update the slide position 17: if (!slider.settings.ticker) setSlidePosition(); 18: // if active.last was true before the screen resize, we want 19: // to keep it last no matter what screen size we end on 20: if (slider.active.last) slider.active.index = getPagerQty() - 1; 21: // if the active index (page) no longer exists due to the resize, simply set the index as last 22: if (slider.active.index >= getPagerQty()) slider.active.last = true; 23: // if a pager is being displayed and a custom pager is not being used, update it 24: if (slider.settings.pager && !slider.settings.pagerCustom) { 25: populatePager(); 26: updatePagerActive(slider.active.index); 27: } 28: };   slider元素中，如果有img或者iframe无法正常加载，会引发slider无法正常工作。 修复前： 1: var loadElements = function (selector, callback) { 2: var total = selector.find('img, iframe').length; 3: if (total == 0) { 4: callback(); 5: return; 6: } 7: var count = 0; 8: selector.find('img, iframe').each(function () { 9: $(this).one('load', function () { 10: if (++count == total) callback(); 11: }).each(function () { 12: if (this.complete) $(this).load(); 13: }); 14: }); 15: } 修复后： 1: var loadElements = function (selector, callback) { 2: var total = selector.find('img, iframe').length; 3: if (total == 0) { 4: callback(); 5: return; 6: } 7: var count = 0; 8: selector.find('img, iframe').each(function () { 9: $(this).one('load', function () { 10: if (++count == total) callback(); 11: }).one('error', function() { 12: if (++count == total) callback(); 13: }).each(function () { 14: if (this.complete) $(this).load(); 15: }); 16: }); 17: }

最近在改版65emall的时候，碰到一个很棘手的问题，Chrome浏览器有个最小字号设置，就是当字号小于最小字号时，就会自动调整为自动调整为最小的字号。如下图： 在中文版的Chrome中，默认的最小字号是12； 在英文版的Chrome中，默认的最小字号是10。 1: -webkit-text-size-adjust:none; 网上很多都建议使用上面这样的语法来实现，但在高版本的Chrome中，这个语法已经无效了。 所以使用 -webkit-transform: 代码如下： 1: .font-size8 { font-size: 8px;} 2: .font-size9 {font-size: 9px;} 3: .font-size10 {font-size: 10px;} 4: @media screen and (-webkit-min-device-pixel-ratio:0) { 5: .font-size8 { 6: font-size: 12px; 7: margin-top: 1px; 8: -webkit-transform: scale(0.83); 9: } 10: .font-size9 { 11: font-size: 12px; 12: margin-top: 2px; 13: -webkit-transform: scale(0.86); 14: } 15: .font-size10 { 16: font-size: 12px; 17: margin-top: 2px; 18: -webkit-transform: scale(0.92); 19: } 20: } 注意一下 为了能同时兼容中英文Chrome，10号，11号也要这样缩小 这个比例不是简单的等比例缩小，比如9号字，的缩放比例就不是0.75 另外需要注意的一点是，长度，高度，还是会按照10或者12号字来计算，所以，最好在外层在加个div作为容器。 1: <div> 2: <div class="font-size9">font-size:9px</div> 3: </div>

做为一个非专业的Css编写人员，一不小心，就可以踩到坑。 觉得小于12号的字不利于阅读，所以google chrome小于12号的字，都会被修正为12号。 google了下，据说，随着浏览器版本的升级，处理的方案还不一样。 整体的代码如下： 1: * { 2: -webkit-text-size-adjust: none; 3: -webkit-transform-origin-x: 0; 4: -webkit-transform: scale(0.8333333333333334); /* 10/12=0.8333333333333334） */ 5: }

要实现my cart那样的边框效果，很自然的想到 上面一个div， 下面一个div， 上面那个div的z-index比下面的这个大， 下面这个div往上移1px。 然后，悲剧就开始了。。。 总结了一下，基本上是以下几个坑： z-index 仅能在定位元素上奏效，就是要求该元素设置 position:xxxx，否则z-index无效。 如果元素内嵌于li，那么li需要设置 position:relative 上面的div需要设置background，否则无法遮住下面的div 主要代码如下: 1: <li style="position:relative" id="cart" > 2: <div style="width: 100px; height:23px; position: relative; z-index: 2; background-color: white; border: 1px solid #d3d3d3;"></div> 3: <div style="position: absolute; width: 100px; z-index: 1; top: 22px; background-color: white; border: 1px solid #d3d3d3; "> 4: </div> 5: </li>

目前，没有统一的CSS语法可以来设置placeholder的样式，但IE,Firefox, Chrome/Safari都提供了各自的语法，具体如下。 1: ::-webkit-input-placeholder { color:#f00; } 2: ::-moz-placeholder { color:#f00; } /* firefox 19+ */ 3: :-ms-input-placeholder { color:#f00; } /* ie */ 4: input:-moz-placeholder { color:#f00; } /* firefox */

这个话题挺有意思的，网上给出了很多的解决方案，感觉只有一种方法比较实用。 1: <div style="width:150px; height:150px;display:table-cell; vertical-align:middle;"> 2: <div style="width:150px;"> 3: <div> 4: </div> 其实，如果不考虑IE，并不需要嵌在内部的div。 另外PS另外一个小技巧：img的等比例缩放大小。 1: <img style="max-height:150px; max-width:150px;" src="">

前段时间，65emall上请设计公司设计的活动页面使用了google字体，效果是挺好看的，问题是google字体只提供woff文件，所以在ie浏览器下无法正常浏览，要兼容ie的各个版本需要将woff文件转换成eot,tff等文件，找了很多个网站或是技术问题，或者是版权问题，都无法直接转换woff文件，最后在颠_颠帮助下找到了everythingfonts。问题就可以解决了。 1 将google字体下载下来 2 通过everythingfonts将woff文件转换成tff文件 3 再通过其他的在线字体转换网站转换成eot等文件格式 4 然后是@font-face来搞定   PS： 1 everythingfonts可能需要翻墙。 2 转换后的字体，字宽可能会不一样，可以使用font-weight来调整一下。 3 版权问题，谁要知道怎么处理，更我说一下。 4 http://www.zhuan-huan.com/font-converter.php 这里好像也可以转换，未验证。 实例下载

这几天，在写CSS的时候，碰到两个问题。 1. 对chrome下只用做background的td标签height设置为5px，但实际显示的效果是6px。 解决的方法是：在td内添加一个div，设置div的height为5px; 原始代码： 1: <td class="top" colspan="6"></td> 2: <style> 3: .top {width: 1183px; padding: 0px; height:5px; background-image: url(/Content/Image/UI/Order/myorder_top.png); background-repeat: no-repeat; } 4: </style>   改进后： 1: <td class="top" colspan="6"> 2: <div class="topContent"></div> 3: </td> 4: <style> 5: .top {width: 1183px; padding: 0px; height: 5px;} 6: #myOrder .item .top { height: 5px \9;} /*ie8*/ 7: .topContent {padding: 0px;height: 5px; background-image: url(/Content/Image/UI/Order/myorder_top.png); background-repeat: no-repeat; } 8: </style>   2. 对chrome下只用做background的td标签height设置为5px，但实际显示的效果是6px。 解决的方法是：利用webkit的css hack，将width设置为4px. 原始代码： 1: #myOrder .item .right { width: 5px; padding: 0px;background-image: url(/Content/Image/UI/Order/myorder_left.png); background-repeat: repeat-y;} 改进后： 1: #myOrder .item .right { width: 5px; padding: 0px;background-image: url(/Content/Image/UI/Order/myorder_left.png); background-repeat: repeat-y;} 2: @media screen and (-webkit-min-device-pixel-ratio:0){#myOrder .item .right{ width: 4px; } }   width偏差的原因：google了下，说是自动表格布局下，各个浏览器对最小单元格宽度(MCW)的表现不一样。猜想height偏差估计也是相同的道理。 参考资料： 自动表格布局：http://www.w3.org/TR/CSS21/tables.html#auto-table-layout width偏差：http://w3help.org/zh-cn/causes/RE8018          http://w3help.org/zh-cn/causes/RE9019

很多时候，我们希望给div加个圆角的边框，或者图片边框。很自然，我们想到九宫格的布局。这时，不应该考虑使用div来实现九宫格，而要使用table来实现，因为作为背景的div的高度宽度无法自适应。如下： auto width auto height   auto height   auto width