上海网页设计公司如何解决IE双边距BUG
一、双边距是什么含义?
如上图,绿色块要求在蓝色块中向左浮动,并距蓝色块左边距100像素。这样的布局在美工网页设计过程中经常用到。实现这样的效果,一般使用如下css样式:.floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px;},看上去似乎简单,但是如果在IE6中浏览时会发现100的边距变为200了。
二、这是为什么?
其实笔者也不清楚究竟什么原因,但它确实在ie6中存在。研究发现在元素浮动方向与浮动边据一致时才会出现,上面的例子就是这样。另外同一行如果有多个浮动元素,则只有至上个元素会出现bug。
三、怎样避免这种情况
给浮动元素样式加上display:inline就能解决问题。
如上图,绿色块要求在蓝色块中向左浮动,并距蓝色块左边距100像素。这样的布局在美工网页设计过程中经常用到。实现这样的效果,一般使用如下css样式:.floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px;},看上去似乎简单,但是如果在IE6中浏览时会发现100的边距变为200了。
二、这是为什么?
其实笔者也不清楚究竟什么原因,但它确实在ie6中存在。研究发现在元素浮动方向与浮动边据一致时才会出现,上面的例子就是这样。另外同一行如果有多个浮动元素,则只有至上个元素会出现bug。
三、怎样避免这种情况
给浮动元素样式加上display:inline就能解决问题。
相关新闻
- 网站设计五种常见问题及解决办法2019-04-25
- 网站设计使用颜色利于用户抓取重点2019-04-25
- 网站设计中如何减少页面跳转2019-04-08
- 如何提高网站服务器的安全性?2019-03-28
- 高端网站设计主要有哪些具体注意事项2019-03-28
- 网站设计的交互设计知识介绍2019-03-28
- 网站设计有哪些经典不过时的主流风格?2019-03-28
- 网站设计背后收获的好处2019-03-07
- 网站设计的基本步骤和方法2019-03-07
- 网站被标记不安全怎么办?你缺少一个SSL证书2019-03-07
- 直接影响网站用户体验的5大因素2019-03-07
- 如何提高网站服务器的安全性?2019-01-08
- 网站设计中需要注意的六大点是什么?2019-01-08
- 网页设计要在网站建设前的“四不要”2019-01-08
- 网站设计配图有哪些技巧可寻2018-11-08
- 网页设计之简约设计的技巧2018-11-08
- 网站设计需要注意哪些?2018-11-08
- 网站设计要做好用户体验 说的简单可如何做呢2018-11-08