开发杂记-烦心整理

by kevin 11. 十一月 2014 21:10 >
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: }

开发杂记-无心整理

by kevin 15. 六月 2014 17:32 >
最近是累了点,懒了点。 一个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: }

开发杂记:如何处理google chrome最小字号的问题

by kevin 16. 十二月 2013 14:15 >
最近在改版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>

开发杂记:让小于12号的字在google chrome中显示

by kevin 8. 十一月 2013 13:40 >
做为一个非专业的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: }

开发杂记:z-index的那些坑

by kevin 22. 十月 2013 13:58 >
要实现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>

开发杂记:给placeholder设置样式

by kevin 15. 八月 2013 13:23 >
目前,没有统一的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 */

开发杂记:DIV垂直居中

by kevin 23. 七月 2013 22:26 >
这个话题挺有意思的,网上给出了很多的解决方案,感觉只有一种方法比较实用。 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="">

开发杂记:如何使用google字体

by kevin 26. 六月 2013 13:56 >
前段时间,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 这里好像也可以转换,未验证。 实例下载

开发杂记:chrome下只用做background的td标签width-height偏差

by kevin 3. 六月 2013 13:54 >
这几天,在写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的高度宽度无法自适应

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