- 浏览: 331907 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
1. 设置position: relative
将一个元素设置为”position:relative”可以解决很多问题,特别是遇到隐藏的或对齐诡异的盒子。显然,需要注意,因为绝对定位的子节点可能会因此重新定位。
2. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能引起著名的IE6双倍margin问题,为一个元素指定margin-left为5px,但是IE6中实际上却表现为10px。”display:inline”将解决这个问题。
3. 将一个元素设置为hasLayout
很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 这是一个IE内部属性(IE隐藏的,更多关于haslayout的资料,可以参阅这里),用来确定相对于其他元素,内容是如何布局和定位的。如果要设置一个inline元素(比如一个链接)为block元素,或者是应用透明效果,设置hasLayout也可能是必须的。
最简单的设置hasLayout的方法是为CSS设置一个高度或宽度(zoom也可以用,但是zoom并不是CSS标准的一部分)。设置实际尺寸,但是问题是这是不现实的,可能需要使用”height:1%”。如果父元素并没有设置高度,该元素的实际高度并不受影响,而且这个时候hasLayout已经被启用。
4. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:
确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
访问 positioniseverything.net 查看该问题的完整介绍。
5. 在可点击和悬停的元素上只使用标签IE6只认识对a标签的CSS hover效果。可以在基于JavaScript的组件内使用他们来控制,以使他们保持键盘的可操作性。是有一些可替代的选择,但是标签比其它方案更可靠。
6. 使用!important 或高级选择器来区分IE6不使用传统Hack或在额外文件中的条件CSS的方法,写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义:
IE6 不理解min-height并错误的用20em覆盖”auto”高度,但是,如果内容需要更多的空间的话,它会自动增加高度。
另外一个可选的方法是使用高级选择器
7. 避免百分比单位
百分比会把IE搞糊涂的。除非可以确切的控制每一个父元素的大小,才可能做到最佳预防。可以通过!important在其他浏览器中继续使用百分比
8. 重构的代码
经常发生的事情是,修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。
将一个元素设置为”position:relative”可以解决很多问题,特别是遇到隐藏的或对齐诡异的盒子。显然,需要注意,因为绝对定位的子节点可能会因此重新定位。
2. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能引起著名的IE6双倍margin问题,为一个元素指定margin-left为5px,但是IE6中实际上却表现为10px。”display:inline”将解决这个问题。
3. 将一个元素设置为hasLayout
很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 这是一个IE内部属性(IE隐藏的,更多关于haslayout的资料,可以参阅这里),用来确定相对于其他元素,内容是如何布局和定位的。如果要设置一个inline元素(比如一个链接)为block元素,或者是应用透明效果,设置hasLayout也可能是必须的。
最简单的设置hasLayout的方法是为CSS设置一个高度或宽度(zoom也可以用,但是zoom并不是CSS标准的一部分)。设置实际尺寸,但是问题是这是不现实的,可能需要使用”height:1%”。如果父元素并没有设置高度,该元素的实际高度并不受影响,而且这个时候hasLayout已经被启用。
4. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:
确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
访问 positioniseverything.net 查看该问题的完整介绍。
5. 在可点击和悬停的元素上只使用标签IE6只认识对a标签的CSS hover效果。可以在基于JavaScript的组件内使用他们来控制,以使他们保持键盘的可操作性。是有一些可替代的选择,但是标签比其它方案更可靠。
6. 使用!important 或高级选择器来区分IE6不使用传统Hack或在额外文件中的条件CSS的方法,写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义:
#element { min-height: 20em; height: auto !important; /* 所有浏览器都理解这段代码 */ height: 20em; /* IE6 错误的使用这个值 /* }
IE6 不理解min-height并错误的用20em覆盖”auto”高度,但是,如果内容需要更多的空间的话,它会自动增加高度。
另外一个可选的方法是使用高级选择器
#element { min-height: 20em; height: 20em; } /* IE6 无视下面的代码*/ #element[id] { height: auto; }
7. 避免百分比单位
百分比会把IE搞糊涂的。除非可以确切的控制每一个父元素的大小,才可能做到最佳预防。可以通过!important在其他浏览器中继续使用百分比
body { margin: 2% 0 !important; margin: 20px 0; /* IE6 only */ }
8. 重构的代码
经常发生的事情是,修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。
发表评论
-
Zepto
2015-08-15 13:49 1206Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 733//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 537Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 480Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 855首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2711Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 685特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14712流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6213首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1345通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 655一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 884<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7301. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 717一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 514看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 827最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 604最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 407做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 667在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 734<object width="940&qu ...
相关推荐
响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然...关于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就无法显示出来。
其中使用的浏览器及其版本为IE6.0、IE7.0、Firefox2.0。其中具体实例使用的浏览器版本,请参照相关章节的内容部分。 -----------------------------硬件环境--------------------------------------- 无特殊要求...
自己遇见的一些常见的css兼容性问题。和css hack 自己总结出来后生产pdf文档带书签的。 ...12. IE6中居中布局问题 7 13. IE6 Png图片不透明问题 7 14. 移除超级链接的虚线 7 15. 隐藏水平滚动条 7
目前市面上流行的浏览器有目前主要主流的浏览器有IE6、IE7、IE8、IE9、foxfire浏览器、google浏览器、opera浏览器、safari浏览器和基于IE内核的(如:360)等其他的浏览器,这些浏览器在处理一个相同的页面时,表现...
技术特点: 本示例主要源自自己最近要做的一个项目需要用到,但是百度了下觉得这个和我的相近,但是下载下来后发现各兼容性都不好,于是花了几个小时整理并升级了这个功能示例...浏览器兼容:IE6 、chrome,更多请自测
4、程序在服务器上的反应速度,跟服务器上网站数量和硬件配置及国内外IP和带宽有关。 5、首页频道开启 请在后台【管理分类 - (设置)首页(开启)状态】 即可增加首页列表内容。 6、默认只设置了2个,为了避免...
-修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...
已存在解决方法:利用float和margin的负值偏移...要注意的是,使用overflow的时候,一定要定义width,百分比或者具体值都可以.)即可,这样在IE6和IE7中都能有效的显示。 实现:这里也采用上面参考中的例子,其中例子中的
一、IE边框若显若无,须注意,定是高度设置已忘记; 二、; 三、 ...十、列表横向排版,列表代码须紧靠,空隙自消须铭记。
DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV+CSS设计的网页,就应该更注意IE6 IE7 FF对CSS样式的兼容. ...
金色布局 请注意,该项目目前正在进行较大的维护和重构,我们的目标是在2020年上半年发布2.0版本。产品特点全触摸支持本机弹出窗口完全主题化全面的API 强大的持久性适用于IE8 +,Firefox,Chrome 响应式设计安装/...
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握...important标记区别Firefox和IE6 DIV+CSS页面布局中注意的问题以及常用的CSS使用方法 网页布局基础-XHTML与CSS基础 CSS命名规则
-实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语翻译(feedback:vbelyaev)。 +2010-06-30 v2.3.1 -ExtAspNet控件将不在依赖ViewState,...
4、程序在服务器上的反应速度,跟服务器上网站数量和硬件配置及国内外IP和带宽有关。 5、首页频道开启 请在后台【管理分类 - (设置)首页(开启)状态】 即可增加首页列表内容。 6、默认只设置了2个,为了避免大家...
4、spread:阴影的大小,指定要在基础阴影上扩充出来的大小距离,取值以px为单位的数值 5、color:阴影颜色 6、inset:将默认外阴影转为内阴影 在第一位 4、轮廓 轮廓指的是边框的边框,绘制于边框外的线条。 ...
4.首个 全任意坐标可拖拽式模板布局编辑器,拖拽完自动切图生成相对定位div代码 5.http://你的域名/index.php/yun 为云模块列表页,可以共享云模块 6.马良神笔cms是全开源的php 的cms系统,而且基于我们的云...
一、修正IE6上的部分显示问题。 二、后台操作习惯优化。 三、进一步规范命名规则。 2012-06-28 1.4 发布 一、修改顶部loog和名称图片样式。 二、修正订单不成功的bug。 三、规范命名规则。 四、模板细节...
5、修正从菜单功能中导进文件数据对不上的问题; 6、修正添加无内容文件时的BUG; 7、添加只读打开功能(要设置密码); 1.7版本 1、修改数据库格式,添加一些数据库信息,程序会把旧数据库自动转换到新版本的...
元素均分宽度、两端自适应对齐的布局在移动web项目中的需求还是挺多的,使用inline-block元素,配合text-align:justify,再注意处理好一些细节问题,便可以在现代浏览器上实现两端对齐,但是最后一行的处理却是个...