2017年04月_fullstack_lth

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创浏览器兼容问题项目总结（六）页面嵌套多个iframe滚动条兼容性修改

最近几天一直在chrome和IE的兼容性问题上花费较多时间，将我在iframe这个问题上的一个坑给大家做个分享。iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM

2017-04-26 13:20:53 3244

原创 JavaScript判断浏览器种类

function KindOfBrowser() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 var isIE = userAgent.indexOf("compatible"

2017-04-25 10:35:30 333

原创 JS（七）面向对象设计

ECMA-262 把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。” 可以把 ECMAScript 的对象想象成散列表：无非就是一组名值对，其中值可以是数据或函数。一、属性类型ECMAScript 中有两种属性：数据属性和访问器属性。1. 数据属性数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有 4 个描述其行为的特性。 [[Confi

2017-04-19 13:36:30 217

转载一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题百度源代码如下http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>;百度一下，你就知道 var wpo={s

2017-04-18 19:19:48 926

原创浏览器兼容问题项目总结（五）table中td和li高度问题

问题：在IE9、IE10、FF、chrome中table中td的高度不包含border的宽度，但是IE7和IE8中td的高度包含了border的高度，设置line-height和height一样。解决：暂无解决办法，只能通过判断浏览器解决。其问题示例如下：[html] view plain copy 设置line-height:20px

2017-04-18 17:29:30 5279

原创 require.js学习笔记

这段代码依次加载多个js文件。这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应

2017-04-17 14:52:18 249

原创 HighChart（二）图表自适应容器

最近项目中有的图表由于刻度的原因已经超出所在容器，会有部分图表超出普通界限。解决方案：HighChart图表自适应容器代码：var chart = $('#container').highcharts();chart.reflow();

2017-04-14 16:30:20 3509 3

转载 html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offs

2017-04-12 13:51:36 210

原创 BOM对象模型应用分析

一、scrollHeight、offsetHeight、clientHeight的区别document.documentElement.scrollWidthdocument.documentElement.offsetWidthdocument.documentElement.clientWidthdocument.body.scrollWidthdocument.body.offset

2017-04-12 13:38:12 317

原创 CSS技巧

1、垂直水平居中水平居中行内元素: text-align: center 块级元素: margin: 0 auto absolute + transform flex + justify-content: center 垂直居中 line-height: height absolute + transform flex + align-items: cente...

2017-04-09 17:40:01 271

原创浏览器兼容问题项目总结（三）事件处理机制

由于项目需要，本系列文章基于IE7兼容模式和Chrome49这两种浏览器内核版本所做兼容。1、IE和Chrome下绑定事件处理方式：IE：attachEvent(‘onresize’,function)；Chrome: addEventListener(resize,funtion，false)；事件处理兼容性解决方法：if(window.attachEvent){window

2017-04-05 16:14:08 1192

原创浏览器兼容问题项目总结（一）浏览器

一、浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或其他的类型。资源的位置由用户使用URI（统一资源标符）指定。多年以来，各浏览器都没有完全遵从这些规范，同时还

2017-04-05 11:37:49 728

原创浏览器兼容问题项目总结（二）Highchart 在chrome下x轴文字竖直显示（兼容IE和Chrome）

最近刚做完一个浏览器兼容性项目，所以上个月几乎没有写blog，最近在总结项目经验，特推出此系列。在IE7兼容模式下正常显示的图表X轴的文字是竖直显示的，如下所示：但是Chrome下县市出现了不兼容性，如下图所示：为此查了很多资料，最后想到：把x轴上的数据，每个数据的每两个字之间加个换行符,解决方案：针对浏览器判断，按照不同浏览器执行不同的代码。如果是IE

2017-04-05 11:32:46 1159