收藏 分销(赏)

ihswebsphere多集群多端口web服务器架构.doc

上传人:二*** 文档编号:4742729 上传时间:2024-10-11 格式:DOC 页数:36 大小:1.46MB 下载积分:5 金币
下载 相关 举报
ihswebsphere多集群多端口web服务器架构.doc_第1页
第1页 / 共36页
本文档共36页,全文阅读请下载到手机保存,查看更方便
资源描述
IHS+WAS6ND实现多应用服务器集群+多web端口服务器架构配置经验 日前本人做为一个项目的外援参与配置了一个复杂WAS群集架构的部署,该项目由于遇到特殊情况需求采用HIS+WAS6ND实现多应用服务器集群+多web端口服务器架构,在Google上搜索了一遍,没有找到类似的架构配置方式,只有自己来研究了。总算功夫不负有心人,经过多次实验,终于成功实现了上述架构的配置。 由于配置过程中经历了种种艰辛,所以将这种架构的配置经验做了总结,与大家分享,希望能对大家有所帮助。 首先来说一下为什么会需要采用这样的架构。 从我进入IT行业以来,这样的架构还是第一次见到。不能不说一句我对能够想出并实现这样架构的开发工程师和系统集成工程师致以崇高敬意,因为在应用需求不断变化软硬件架构和系统软硬件有条件限制的情况下,能够成功实现这样的配置达到项目目标不能不说是一件非常不容易的事情。同时,我要对该项目的管理人员、设计人员以及实施项目企业的高层人员说一句,你们应该特别感谢这些能够保证你们项目成功的开发人员和系统集成人员,因为他们项目才得以成功,因为他们才保住了企业的信誉和颜面。 J跑题了,言归正传。 根据项目初期的设计,需要建立一个应用系统,为保证应用系统的高可用性(服务不能中断),对于这个应用系统采用2台web服务器网络负载均衡+2台was应用服务器负载均衡服务器群集方式,后台是Oracle数据库的集群。Web服务器网络负载均衡是采用windows 2003 server的网络负载均衡集群实现的,F5在这个项目里是买不起的。通过web服务器将请求路由分发到was集群的两台应用服务器上。这样的架构是按照was应用集群模版的标准配置设计的,所以配置起来没有什么问题。 但是项目进行过程中发觉原来的需求根本没有调研清楚,发生了重大的需求变更,按照原来对应用系统的设计根本无法满足项目的需求,所以对应用系统的设计进行了重大调整,该项目需要增加开发两个应用系统,就是需要增加部署两套应用系统。由于硬件数量已经确定无法增加,并且web访问地址也只有两个,无法增加,同时又需要保证应用系统的高可用性,因此需要再每组应用集群里多部署一套应用系统。 而由于采用的开发构件库产品EOS只能基于根目录访问,因此不能采用虚拟目录的方式在一个应用服务器里部署两个应用,需要每个应用使用一个独立的应用服务器。这样造成了需要在一组硬件应用服务器集群里部署两个应用服务器的需求。同时web服务器也需要进行类似的部署,一个web服务器上需要映射两个应用服务器,所以IHS的一个web服务器使用80端口,另一个web服务器就需要使用非标准的端口了。 下面是重新设计出来的系统架构: 上述部署方式是目前基本稳定下来的架构,但是在未来可能由于项目需求的变化,可能还会增加1-2个新的应用集群,也就是说未来还会新增1-2应用集群在这组硬件设备上。(真不知这个项目是怎么进行需求调研设计的,还是CMM4呢,整个一手工作坊)。 按照这样的要求进行配置,看上去挺简单的,但在实际过程中确艰辛重重。 先来介绍一下配置步骤: 1、 在APP1和APP2上分别安装WAS6.0ND,并根据构件库产品的要求升级补丁; 2、 在APP1上创建WAS NB的管理服务NDMG01; 3、 在APP1和APP2上分别创建应用服务器样本; 4、 在NDMG01的管理控制台中将APP1和APP2加为NDMG01的受管节点; 5、 在NDMG01的管理控制台的应用服务器管理为APP1和APP2分别再建立第二个应用服务器; 6、 创建两个应用服务器集群,并分别将对应的应用服务器加入集群; 7、 在两台web服务器上分别安装IHS ,将默认web服务注册为windows服务; 8、 分别将web服务器上的IHS安装目录中的conf目录下的配置文件httpd.conf复制一份命名为httpd8000.conf,修改复制的配置文件,将默认的80端口改为8000; 9、 使用命令apache -k install -n httpd8000 -f “c:\ihs\ibm\conf\httpd8000.conf”将8000端口的web服务也注册为windows服务; 10、 启动所有配置好的web服务,并测试一下; 11、 停止所有web服务,为不同的web服务分别安装websphere plugins插件; 12、 启动web服务,并进行测试; 13、 配置windows网络负载平衡群集,并进行测试; 14、 在NDMG01管理控制台上将两台web服务器加为非受管节点,并在两个节点上创建对应的web服务器。 15、 在NDMG01管理控制台上,分别将相应的应用系统安装到应用服务器群集上。安装过程中可以将应用模块映射到应用服务器虚拟主机以及将应用系统映射到对应的web服务上,也可以在安装好应用后再进行配置。两种方式都经过测试没有问题。 16、 对每个web服务生成插件和传播插件。 17、 配置结束,进行应用访问的测试并成功。 上面的步骤中常规的操作在本文中不进行详细介绍了,可以参考was 6.0 ND的安装手册以及IHS 配置手册,下面我将详细介绍配置过程中需要注意以及容易产生问题的地方以及应对方法。 1、 在APP1和APP2上分别安装WAS6.0ND,并根据构件库产品的要求升级补丁; 个人认为只要安装WAS应用服务器就可以了,但是由于项目组中的某人在一篇文章上看到需要同时安装IHS以及web服务插件才能进行补丁升级,所以同时又安装了IHS和web服务插件。关于是否仅需要安装WAS应用服务器也可以升级,由于时间关系没有进行测试。 WAS6.0的补丁包需要依次安装,不能跳过前期版本。在这个项目中,我安装的是6.0.2.7补丁,因此需要先装6.0.2.0的补丁,然后再安装6.0.2.7的补丁,具体安装步骤请参照websphere的升级手册。 2、 在APP1上创建WAS NB的管理服务NDMG01; 这部基本上按照标准步骤进行,建议记录下输入的服务名以及主机名等信息,方便查阅; 3、 在APP1和APP2上分别创建应用服务器样本; 这一步也基本按照标准步骤,可以将应用服务器注册为本机服务,也可以不注册,我是没有将它注册为本机服务。记录下服务名 4、 在NDMG01的管理控制台中将APP1和APP2加为NDMG01的受管节点; 这一步建议将agent注册为windows服务 5、 在NDMG01的管理控制台的应用服务器管理为APP1和APP2分别再建立第二个应用服务器; 这一步在NDMG01的管理控制台进行,建议服务名便于分辨和记忆,需要记录对应的每一台APP上创建的应用服务器名称,以防在后面的配置过程中搞乱。 6、 创建两个应用服务器集群,并分别将对应的应用服务器加入集群; 这一步和上一步一样,也需要做记录,防止以后的配置中出错。 7、 在两台web服务器上分别安装IHS ,将默认web服务注册为windows服务; 注意记录注册的windows服务名称 打开一个DOS 窗口,进入到<IHS_HOME>\bin 路径下执行: htpasswd -bc ..\conf\admin.passwd <uid> <pwd> 其中<IHS_HOME> 代表IHS V6 的安装目录,<uid> 代表IHS V6 的管理员ID <pwd> 代表IHS V6 管理员的用户密码 * 注意:如果想通过WAS ND V6 的管理控制台直接管理远程的IHS V6 必须首先设定IHS V6 的管理员ID 和密码,并且传播插件是否成功也需要做这一步 8、 分别将web服务器上的IHS安装目录中的conf目录下的配置文件httpd.conf复制一份命名为httpd8000.conf,修改复制的配置文件,将默认的80端口改为8000; 9、 使用命令 apache -k install -n httpd8000 -f “c:\ihs\ibm\conf\httpd8000.conf” 将8000端口的web服务也注册为windows服务; 注意记录注册的windows服务名称httpd8000 10、 启动所有配置好的web服务,并测试一下; 11、 停止所有web服务,为不同的web服务分别安装WAS的web服务plugins插件(步骤如下); 这里插件需要安装两次(如想不安装两次,则要手工配置,相当复杂,本人没有配置成功,不知有没有高手能手动配置成功),以对应不通的web服务,并需要特别注意对应的端口号、IHS的配置文件位置以及web服务器plugin-xml的位置都需要重新配置,不要按照默认的目录不修改,否则之后的配置就会出错。同时安装过程中需要将输入的定义web服务名记录下来,在以后的映射配置时需要对应。 如需要对web服务器进行升级,也需要对不同的plugin进行升级。 过程如下: 1 . 在如下图1 的界面中选择,IBM HTTP Server V6 ,然后单击“下一步” 图1 2 . 在如下图2 的界面中选择“Web 服务器(远程)” 然后单击“下一步” 图2 3 . 在如下图3 的界面中指明插件安装的位置,然后单击“下一步”,注意请记住这个路径,在下面的步骤中需要该路径。 图3 4 . 在如下图4 的界面中指明IHS V6 配置文件httpd.conf 的位置和Web 服务器的端口,然后单击“下一步” 图4 5 . 在如下图5 的界面中指明唯一的Web 服务器定义名,然后单击“下一步”,注意请记住这个定义名,在下面的步骤中需要该名称。 图5 6 . 接受默认的Web 服务器plugin-cfg.xml 文件的位置,单击“下一步” 7 . 在如下图6 的界面中指明标示应用程序服务器的主机名,然后单击“下一步” 图6 12、 启动web服务,并进行测试; 13、 配置两台web服务器实现windows网络负载平衡群集,并进行测试; 可参考相应文档进行配置,需要注意的是需要采用单网卡多播模式或者双网卡单播模式,否则集群中的两台主机无法相互访问,造成不必要的时间浪费。 14、 在NDMG01管理控制台上将两台web服务器加为非受管节点,并在两个节点上创建对应的web服务器。 对应的web服务器的服务名称需要与之前安装web服务插件时的服务名称相对应,并且注意端口号的配置也要对应。 在如下图页面中,选择Web 服务器的类型为“IHS ”,填入Web 服务器的安装路径,监听端口以及服务名称。最后填入“插件安装位置” * 注意:这里填写的插件安装位置必须与上面第二部分(在远程的IHS V6 所在的机器上安装WAS 插件程序)的步骤4 所填写的插件安装位置相一致。 在如下图的页面中,依次填入IHS 的管理服务端口,管理员ID 和密码,单击“下一步” * 注意:这里填写的管理员ID 和密码必须与上面第一部分(准备环境)的步骤2 所填写的管理员ID 和密码相一致,这样插件传播才能成功 15、 在NDMG01管理控制台上,分别将相应的应用系统安装到应用服务器群集上。安装过程中可以将应用模块映射到应用服务器虚拟主机以及将应用系统映射到对应的web服务上,也可以在安装好应用后再进行配置。两种方式都经过测试没有问题。 在进行这一步配置的时候,由于第二个应用服务对应的不是标准was服务端口,所以需要手工创建新的虚拟主机,并配置对应的主机别名为相应端口,本项目中对应的是9081。 在映射虚拟主机时注意要选择正确的端口,否则配置会不成功。 见下图: 16、 对每个web服务生成插件和传播插件。 如果前面的配置都正确,这一步是最简单的。验证生成插件是否正确的方式是到相应的目录中查看plugin-xml的长度是否为2k,如果是2k则前面的配置肯定有错误,可以到NDMG01的log目录中查看systemout.log,来确认错误出在哪里。一般可能是没有将应用模块映射到虚拟主机,或者是没有映射web服务器。需要重新进行这两步的配置,见下图: 到此配置结束,测试成功祝大家工作顺利。附录资料:web前端面试题 1. W3C标准有哪些?  W3C推行的主要规范有HTML,CSS,XML,XHTML和DOM(Document Object Model)。 2. 谈谈Js的内存泄露问题。 3. 谈谈对Html 5的了解。 4. 谈谈对CSS 3的了解。 5. 用js实现随即选取10--100之间的10个数字,存入一个数组,并排序。 var iArray = [];  funtion getRandom(istart, iend){         var iChoice = istart - iend +1;         return Math.floor(Math.random() * iChoice + istart; } for(var i=0; i<10; i++){         iArray.push(getRandom(10,100)); } iArray.sort(); 6. 把两个数组合并,并删除第二个元素。 var array1 = ['a','b','c']; var bArray = ['d','e','f']; var cArray = array1.concat(bArray); cArray.splice(1,1); 7. Js面向对象的几种方式。 8. 请谈谈原型方式构造对象的特点。 9. 在Css中那个属性会影响dom读取文档流的顺序。 答: float属性。 10. 请介绍几种用div实现两列布局的方案(兼容),另外要考虑文档流的加载。 11. 谈谈css在浏览器中的兼容问题,详细谈谈IE6的一些bug,以及解决方案。 12. 谈谈你对闭包的理解。以及如何实现js方法的重写。 [HTML && CSS] 1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 首先我讲讲如何触发两种模式: 加入xml头部声明可以触发IE浏览器的Quirks mode,触发之后,浏览器解析方式就和IE5.5一样,拥有IE5.5一样的bug和其他问题,行为(Javascript)也是如此。 IE6的触发 在XHTML的DOCTYPE前加入XML声明 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE7的触发 在XML声明和XHTML的DOCTYPE之间加入HTML注释 <?xml version="1.0" encoding="utf-8"?> <!-- ... and keep IE7 in quirks mode --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE6和IE7都可以触发的 在HTML4.01的DOCTYPE文档头部加入HTML注释 <!-- quirks mode --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 其次是这样的意义 各个浏览器的混杂模式,基本就是各个浏览器的私有模式,不相互兼容。所以,除非是为了兼容的问题,比如你不想修改很久很久以前做的IE ONLY的网页,否则刻意触发混杂模式没有任何意义。 2:行内元素有哪些?块级元素有哪些?CSS的盒模型? 一.行内元素和块级元素有哪些? 块级元素 <address> information on author <blockquote> long quotation <button> push button <caption> table caption <dd> definition description <del> deleted text <div> generic language/style container <dl> definition list <dt> definition term <fieldset> form control group <form> interactive form <h1> heading <h2> heading <h3> heading <h4> heading <h5> heading <h6> heading <hr> horizontal rule <iframe> inline subwindow <ins> inserted text <legend> fieldset legend <li> list item <map> client-side image map <noframes> alternate content container for non frame-based rendering <noscript> alternate content container for non script-based rendering <object> generic embedded object <ol> ordered list <p> paragraph <pre> preformatted text <table> table <tbody> table body <td> table data cell <tfoot> table footer <th> table header cell <thead> table header <tr> table row <ul> unordered list  行内元素 <a> anchor <abbr> abbreviated form <acronym> acronym <b> bold text style <bdo> I18N BiDi over-ride <big> large text style <br> forced line break <button> push button <cite> citation <code> computer code fragment <del> deleted text <dfn> instance definition <em> emphasis <i> italic text style <iframe> inline subwindow <img> Embedded image <input> form control <ins> inserted text <kbd> text to be entered by the user <label> form field label text <map> client-side image map <object> generic embedded object <q> short inline quotation <samp> sample program output, scripts, etc. <select> option selector <small> small text style <span> generic language/style container <strong> strong emphasis <sub> subscript <sup> superscript <textarea> multi-line text field <tt> teletype or monospaced text style <var> instance of a variable or program argument  二.行内元素与块级元素有什么不同? 1.尺寸-块级元素和行内元素之间的一个重要的不同点  行内元素和width W3C CSS2 标准规定行内元素、非置换元素不会应用width属性。 以下例子中,对行内元素<a>应用了width:200px,你可以看到,根本就没有什么效果。 行内元素和height W3C CSS2 标准规定行内元素、非置换元素不会应用height属性,但是盒子高度可以通过line-height来指定。 以下例子,对行内元素<a>应用了height:50px,你可以看到什么效果都没。 行内元素和padding 你可以给行内元素设置padding,但只有padding-left和padding-right生效。 以下例子,行内元素<a>应用了padding:50px。你可以看到对左右的内容有影响,但是对上下没影响。 行内元素和marging margin属性也是和padding属性一样,对行内元素左右有效,上下无效。 下面的例子,对<a>应用了margin:50px,你可以看到左右边缘是生效了但是内容上下却没有。   记住对行内元素 设置宽度width   无效。 设置高度height  无效,可以通过line-height来设置。 设置margin 只有左右margin有效,上下无效。 设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的,看图上效果就知道了 盒子模型 W3C 组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主 要定义四个区域:内容(content)、边框距(padding)、边界(border)和边距(margin)。对于初学者,经常会搞不清楚 margin,background-color,background- image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。 每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。 盒模型的实际宽度 关于盒模型,还有以下几点需要注意:   ·对于块级元素(display:block),未浮动的垂直相邻元素的上边界和下边界会被压缩,例如:有上下2个元素,上元素的下边界为5px,下面元素的上边界为20px,则实际2个元素的间距为20px(2个边界值中较大的值)。如图所示。 注1. 块级元素(display: block) 每个块级元素都从一个新行开始,而且其后的元素也需另起一行开始,标题、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素,而且需要一定的条件。   ·内联元素,例如<a>、<span>等,定义上下边界不会影响到行高(line-height),内联元素距离上一行元素的距离由行高决定,而不是填充或边界。 注2. 内联元素(display:inline) 内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。   ·浮动元素(无论左或者右浮动)边界不压缩,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。   ·如果盒中没有内容,则即使定义了宽度和高度都为100%,实际上只占0%,因此不会被显示,此点在采取层布局的时候需特别注意。   ·边界值可为负,其显示效果各浏览器可能不相同。   ·填充值不可为负。   ·边框默认的样式(border-style)为不显示(none)。 3.CSS引入的方式有哪些? link和@import的区别是? 本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。 差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。 差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。 差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。 差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。 大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。 标准网页制作加载CSS文件时,还应该选定要加载的媒体(media),比如screen,print,或者全部all等。这个我到CSS高级教程中再给大家介绍。 注: 1,网友comehope在留言中提出了另一种区别。 差别5:@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如: main.css ———————- @import “sub1.css”; @import “sub2.css”; sub1.css ———————- p {color:red;} sub2.css ———————- .myclass {color:blue} 这样更利于修改和扩展. 猴 子提示:这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是 谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码,他们总会把css或js直接写在html里,而不用外部文件。 4.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高? 5:前端页面有哪三层构成,分别是什么?作用是什么? 最准确的网页设计思路是把网页分成三个层次,即:结构层、表示层、行为层。 网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P 标签表达了这样一种语义:“这是一个文本段。” 网页的表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。 网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。 8:你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么? 点评:css的兼容性也是大家关注的热点。大家一定要注意多测试。Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3、FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反,!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important; 浏览器差异 1、ul和ol列表缩进问题 消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效,padding属性对FireFox有效。 [注] 经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才 能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 2、CSS透明问题 IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF:opacity:0.6。 [注] 最好两个都写,并将opacity属性放在下面。 3、CSS圆角问题 IE:ie7以下版本不支持圆角。 FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。 [注] 圆角问题是CSS中的经典问题,建议使用JQuery框架集来设置圆角,让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角,没有支持边框的圆角,不过这个边框的圆角可以通过一些简单的手段来实现,下次有机会介绍下。 4、cursor:hand VS cursor:pointer 问题说明:firefox不支持hand,但ie支持pointer ,两者都是手形指示。 解决方法:统一使用pointer。 5、字体大小定义不同 对字体大小small的定义不同,Firefox中为13px,而IE中为16px,差别挺大。 解决方法:使用指定的字体大小如14px。 并列排列的多个元素(图片或者链接)的div和div之间,代码中的空格和回车在firefox中都会被忽略,而IE中却默认显示为空格(约3px)。 6、CSS双线凹凸边框 IE:border:2px outset;。 FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080; 浏览器bug 1、IE的双边距bug 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案:在这个div里面加上display:inline; 例如: <#div id=”imfloat”> 相应的css为 以下为引用的内容: 复制代码代码如下: #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ } #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ } 关 于CSS中的问题实在太多了,甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是,页面采用标准XHTML标准编写, 较少使用table,CSS定义尽量依照标准DOM,同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下,FF和 Opera的CSS解释标准更贴近CSS标准,也更具有规范性。 2、IE选择符空格BUG 今天在给博客的段落样式设置首字符样式的时候发现,原来一个空格也可以使样式失效。 请看以下代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> <!-- p{font-size:12px;} p:first-letter{font-size:300%} --> </style> </head> <body> <p>对于世界而言,你是一个人;但是对于某个人,你是他的整个世界。纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。</p> </body> </html> [/code] 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999
展开阅读全文

开通  VIP会员、SVIP会员  优惠大
下载10份以上建议开通VIP会员
下载20份以上建议开通SVIP会员


开通VIP      成为共赢上传

当前位置:首页 > 包罗万象 > 大杂烩

移动网页_全站_页脚广告1

关于我们      便捷服务       自信AI       AI导航        抽奖活动

©2010-2026 宁波自信网络信息技术有限公司  版权所有

客服电话:0574-28810668  投诉电话:18658249818

gongan.png浙公网安备33021202000488号   

icp.png浙ICP备2021020529号-1  |  浙B2-20240490  

关注我们 :微信公众号    抖音    微博    LOFTER 

客服