`
leo133845920
  • 浏览: 57952 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

解决DIV居中对齐和IE与Foxfire CSS 宽度兼容性问题

阅读更多

1、针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。

现在写一个CSS可以这样:
#1 { color: #333; } /* Moz */ 
* html #1 { color: #666; } /* IE6 */ 
*+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。

2、css布局中的居中问题

主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明:

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3、盒模型不同解释
#box{
   width:600px;
        //for   ie6.0-   w\idth:500px;
       //for ff+ie6.0
}
#box{
   width:600px!important
            //for ff
    width:600px;
        //for ff+ie6.0
    width /**/:500px;
       //for   ie6.0-
}

4、浮动ie产生的双倍距离

#box{   float:left;   width:100px;   margin:0 0 0 100px; //这种情况之下IE会产生200px的距离   display:inline;   //使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度、宽度、行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,……不可控制(内嵌元素);

#box{   display:block; //可以为内嵌元素模拟为块元素   display:inline; //实现同一行排列的的效果   diplay:table;

5、IE与宽度和高度的问题

IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

#box{    width: 80px;    height: 35px;}html>body #box{    width: auto;    height: auto;    min-width: 80px;    min-height: 35px;}


6、页面的最小宽度

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类:

他也可以利用!important设置;

min-width:600px !import; /*火狐浏览器里的样式。

width:300px; /*ie浏览器中的样式



然后CSS这样设计:
#container{
min-width: 600px;
width:e&shy;xpression(document.body.clientWidth < 600? "600px": "auto" );
}

第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7、清除浮动
.hackbox{
       display:table; 
//将对象作为块元素级的表格显示
}

或者

.hackbox{
        clear:both;
}

或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦的
......#box:after{
    content: ".";
     display: block;
    height: 0;
     clear: both;
     visibility: hidden;
}

8、DIV浮动IE文本产生3象素的bug

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.

也可通过设置右边的层为float:right;来解决;
引用
#box{
    float:left;
    width:800px;}
#left{
    float:left;
    width:50%;}
#right{
    width:50%;
}
*html #left{
    margin-right:-3px;
   //这句是关键
}
HTML代码
<DIV id=box>
    <DIV id=left></DIV>
   <DIV id=right></DIV>
</DIV>

9、属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的。

10、IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11、高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。例:
引用
<div id="box">
     <p>p对象中的内容</p>
   </div>
CSS:

#box {background-color:#eee; }      
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

分享到:
评论

相关推荐

    selenium之foxfire的gwebdriver驱动

    不同的GeckoDriver版本可能对应于对不同Firefox版本的支持,因此,确保GeckoDriver与Firefox浏览器版本的兼容性至关重要,否则可能会导致自动化脚本无法正常运行。 **安装与配置**:在使用Selenium与Firefox进行...

    foxfire编码识别编译版 - byvoid,

    foxfire编码识别编译版 - byvoid,我只是打包编译了一下. 编码问题一网打尽 - wangjieest的专栏 - http://blog.csdn.net/wangjieest/article/details/8097035

    Foxfire-crx插件

    语言:한국어 用于Kumiho的Chrome扩展程序 分散的无服务器Web应用程序平台Kumiho扩展입니다。 https://kumiho.org https://kumiho.readthedocs.io/en/latest/

    Firefox火狐浏览器官方3.6.6-win32版本exe安装包

    升级与兼容性问题** 随着时间推移,较旧版本的Firefox可能无法支持最新的网页标准和技术,因此建议定期更新到最新版以确保最佳浏览体验。不过,对于那些依赖特定插件或有特殊需求的用户,3.6.6版本可能仍然是一个...

    foxfire:Firefox启动器,具有干净且自定义的配置文件,而没有WebDriver

    模块安装: npm install foxfire --save-dev 全局命令行: npm install -g foxfire 全局安装可能需要在OS X上使用sudo 用法 参见 变更日志 1.1.0-Firefox配置文件名称现在具有新格式。 格式为ffire-[date+time] ...

    Firefox火狐浏览器官方Setup 78.10.1esr-win64版本exe安装包

    资源全名:Firefox Setup 78.10.1esr.exe

    firefox安装包

    firefox安装包

    网页设计基础知识.ppt

    浏览器是用于阅读网页中信息的一种软件工具,常见的浏览器有Internet Explorer(IE)、Netscape Navigator(NE)、腾讯TT浏览器、遨游浏览器、Foxfire火狐浏览器等。 5. 统一资源定位符(URL) 统一资源定位符(URL...

    BEEGO小型企业官网后台,BEEGO分页,BEEGO图片上传,BEEGO富文本编辑器

    3、富文本编辑器,集成的是kindeditor,本来想集成百度的Ueditor的,配置起来没这个简单,呵呵,注意,本人的电脑foxfire浏览器无法多图上传,360浏览器可以,应该是跟flash有关 4、过滤器,在java中好像叫拦截器 ...

    linux_mint经验_baidu.docx

    - **32位兼容库安装**: 在 64 位版本的 Linux Mint 中安装 32 位兼容库 `ia32-libs` 是必要的,这样才能够运行像 Thunderbird、Foxfire(独立安装新版时)、Linux QQ 等 32 位的应用程序。 以上内容总结了 Linux ...

    java实现企业固定资产管理系统

    运行环境:支持chrome、edge、foxfire、safari最新版,不支持ie 框架 后台: spring boot(version 2.0) mybatis apache shiro 前端: spring thymeleaf vue.js(version 2.0) jQuery(version 2.1)

    enterpriseAssetManagement:企业固定资产管理系统

    运行环境:支持chrome,edge,foxfire,safari最新版,不支持ie 框架 后台: 弹簧靴(2.0版) Mybatis apache shiro 前置: 春天百里香叶 vue.js(2.0版) jQuery(2.1版) 其他: swagger2 java运行 下载源码...

    KVM虚拟化管理平台VManagePlatform.zip

    一个KVM虚拟化管理平台开发语言与框架:编程语言:Python2.7 HTML JScripts前端Web框架:Bootstrap后端Web框架:Django后端Task框架:Celery RedisVManagePlatform 有哪些功能?Kvm 虚拟机生产周期管理功能资源...

    Firefox Setup 52.9.0esr.exe

    支持WinXP和Vista系统的最后的火狐浏览器Firefox ESR 52.9.0 FireFox 52将是能够支持Windows XP和Windows Vista系统的最后的火狐浏览器。此外用户若希望获得新的功能,则需要将系统升级到Win7、Win10。

    m3u8:m3u8文件下载器库以及chrome和firefox扩展

    m3u8 m3u8文件下载器库以及chrome和firefox扩展/插件用法下载并保存m3u8文件: var p = new m3u8_processor . DownloadFileAndSaveInputParams (){ m3u8FileUrl = &lt; M3U8&gt; , OutputFileName = @" C:\abc.avi " ,};...

Global site tag (gtag.js) - Google Analytics