- 浏览: 1059966 次
- 性别:
- 来自: 南京
文章分类
- 全部博客 (501)
- dwr (6)
- javascript (84)
- oracle (66)
- jsp/servlet (18)
- ant (3)
- 基础知识 (12)
- EXT (10)
- My SQL (10)
- java (71)
- spring (37)
- 学习的对象 (2)
- Linux (24)
- 面试 (1)
- HTML/CSS (11)
- tomcat (11)
- 收藏夹 (2)
- Power Designer (2)
- struts.xml配置文件 (1)
- sturts2 (3)
- myeclipse (8)
- eclipse (7)
- Maven (34)
- SVN (3)
- SAP JCO (2)
- JBOSS (11)
- webservice (8)
- word (1)
- 敏捷开发 (1)
- sybase (4)
- Nexus (3)
- EhCache (3)
- log4j (3)
- Cookie (4)
- Session (4)
- CXF (7)
- AXIS (2)
- SSO (1)
- LDAP (1)
- velocity (2)
- Jquery (5)
- redis (2)
- http (4)
- dojo (1)
- Linux资源监控软件mnon的安装与运用 (1)
- notepad++ (1)
- EA (1)
- UML (1)
- JasperReports (1)
- 权限 (0)
- freemarker (4)
- Spring MVC (1)
- JMS (1)
- activeMQ (1)
- hession (3)
- 安全 (1)
- ibatis (2)
- log (1)
- nginx (1)
最新评论
-
winhbb:
我刚好遇到了一个问题(在可以依赖注入的场合有效):有两个模块A ...
解决Maven项目相互依赖/循环依赖/双向依赖的问题 -
nanjiwubing123:
long3ok 写道你好 XmlOutputFormatter ...
用XStream转换复杂XML -
zhoujianboy:
另外一个方法实现eclipse tomcat 热部署:http ...
eclipse下实现maven项目在tomcat容器热部署方法 -
long3ok:
你好 XmlOutputFormatter 请问这个类是在什么 ...
用XStream转换复杂XML -
ganbo:
总结的好,文章给力。
解决Maven项目相互依赖/循环依赖/双向依赖的问题
1、网页居中显示:
需要设置两个地方,一个是body,一个是外边框div。
body{
margin:0;
padding:0;
text-align:center;
}
/*最外层DIV*/
#main{
width:760px;
margin:0 auto;
padding:0;
}
2、文字垂直居中显示:
在DIV中定义一个行高与其高度相同即可。
.title{
height:25px;
line-height:25px;
vertical-align:middle;
}
3、图片垂直居中显示:
在<img>标签中加入align="absmiddle" 即可。
4、清除浮动:
如果在同一行上有几个DIV并列显示,那么必须在其中加入清除浮动代码。
CSS
.clear{clear: both;}
HTML
<div id="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
5、三列结构中的的DIV写法:
适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应。
CSS
#main{
width:760px;
margin:0 auto;
}
.left{
width:100px;
float:left;
}
.right{
width:120px;
float:right;
}
.center{
margin:0 120px 0 100px;
width:auto;
}
.clear{clear: both;}
HTML
<!--注意:center这个DIV的位置-->
<div id="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<div class="clear"></div>
</div>
6、textarea在FireFox中不能自动换行的处理:
有时我们可能会遇到这种现象,在IE中可以自动换行,但在FF中就是不行,即使加了word-break:break-all;word-warp:warp;也没有效果,怎么回事呢?主要原因是因为我们加入到textarea中的英文字符或代码过长,造成它误识别为一个单词所致。解决方法也很简单,就是在内容中,人为加一些空格,让FF自动识别为多个单词,从而就能正确换行了。
7、设置<ul>表列缩进值:
默认情况下,<ul>列表是缩进两个字符显示列表项目的,我们可以通过设置负边界值达到控制其缩进值的目的。
默认值是0,负值表示向左移,正值表示向右移。
ul{ margin-left: -24px; }
8、水平导航条的制作示例:
HTML
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Case Studies</a></li> </ul>
CSS中,首先清除ul的list-style、margin和padding:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 720px;
float: left;
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
}
然后,可以将li的display属性设置了inline或者设置float为left,display li可能会出现bug,所以我一般用float left的方法:
ul li {
float: left;
}
ul a {
display: block;
float: left; /*跨浏览设置*/
padding: 0 2em;
line-height: 2.1em;
background: url(images/divider.gif) repeat-y left top;/*设置分隔线*/
text-decoration: none;
color: #fff;
}
ul .first a {
background: none; /*去掉第一个链接的背景*/
}
ul a:hover {
color: #333;
}
以上在IE/FF中顺利通过。
需要设置两个地方,一个是body,一个是外边框div。
body{
margin:0;
padding:0;
text-align:center;
}
/*最外层DIV*/
#main{
width:760px;
margin:0 auto;
padding:0;
}
2、文字垂直居中显示:
在DIV中定义一个行高与其高度相同即可。
.title{
height:25px;
line-height:25px;
vertical-align:middle;
}
3、图片垂直居中显示:
在<img>标签中加入align="absmiddle" 即可。
4、清除浮动:
如果在同一行上有几个DIV并列显示,那么必须在其中加入清除浮动代码。
CSS
.clear{clear: both;}
HTML
<div id="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
5、三列结构中的的DIV写法:
适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应。
CSS
#main{
width:760px;
margin:0 auto;
}
.left{
width:100px;
float:left;
}
.right{
width:120px;
float:right;
}
.center{
margin:0 120px 0 100px;
width:auto;
}
.clear{clear: both;}
HTML
<!--注意:center这个DIV的位置-->
<div id="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<div class="clear"></div>
</div>
6、textarea在FireFox中不能自动换行的处理:
有时我们可能会遇到这种现象,在IE中可以自动换行,但在FF中就是不行,即使加了word-break:break-all;word-warp:warp;也没有效果,怎么回事呢?主要原因是因为我们加入到textarea中的英文字符或代码过长,造成它误识别为一个单词所致。解决方法也很简单,就是在内容中,人为加一些空格,让FF自动识别为多个单词,从而就能正确换行了。
7、设置<ul>表列缩进值:
默认情况下,<ul>列表是缩进两个字符显示列表项目的,我们可以通过设置负边界值达到控制其缩进值的目的。
默认值是0,负值表示向左移,正值表示向右移。
ul{ margin-left: -24px; }
8、水平导航条的制作示例:
HTML
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Case Studies</a></li> </ul>
CSS中,首先清除ul的list-style、margin和padding:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 720px;
float: left;
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
}
然后,可以将li的display属性设置了inline或者设置float为left,display li可能会出现bug,所以我一般用float left的方法:
ul li {
float: left;
}
ul a {
display: block;
float: left; /*跨浏览设置*/
padding: 0 2em;
line-height: 2.1em;
background: url(images/divider.gif) repeat-y left top;/*设置分隔线*/
text-decoration: none;
color: #fff;
}
ul .first a {
background: none; /*去掉第一个链接的背景*/
}
ul a:hover {
color: #333;
}
以上在IE/FF中顺利通过。
发表评论
-
JSONEditor
2015-07-08 20:11 555JSONEditor: https://github.com/ ... -
Javascript开发调试
2014-07-08 10:08 738小谈chrome调试命令:console.log的使用 h ... -
利用Script实现JSONP跨域
2014-01-24 09:38 9141.什么是跨域 我们经常会在页面上使用ajax请求访问其他服 ... -
jQuery JSONP 跨域实践
2013-12-12 18:24 681jQuery JSONP 跨域实践 一客户端(url:htt ... -
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2013-10-17 09:35 709预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中 ... -
Js中escape(),encodeURI()和encodeURIComponent()使用和比较:
2013-09-12 09:42 1028Js中escape(),encodeURI()和encodeU ... -
If-Modified-Since & If-None-Match
2013-04-27 13:24 859If-Modified-Since & If-None ... -
为什么JS文件带参数 JS后带参数什么意思
2013-04-27 11:20 1339我们经常在页面里会看到在加载的js或css文件带时文件后面常常 ... -
js实现网页图片延时加载的原理和代码
2013-04-23 11:52 996有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到 ... -
关于document.compatMode的一些介绍
2013-04-22 17:35 970对于document.compatMode,很多朋友可能都根我 ... -
js之事件冒泡和事件捕获
2013-04-20 10:03 1728事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差 ... -
js中addEventListener中第3个参数 .
2013-04-19 16:33 1620捕获阶段、目标阶段、冒泡阶段 addEventListener ... -
超链接在web开发中使用总结
2013-04-02 14:33 1121在工作中在前端页面的 ... -
JavaScript Module Pattern: In-Depth
2013-03-27 11:47 975Module difinition: http://www.a ... -
JQuery移除事件
2013-01-30 13:00 931移除事件 unbind(type [,data]) ... -
Js 冒泡事件阻止
2013-01-29 09:27 9931. 事件目标 现在,事 ... -
查找所有嵌套iframe .
2013-01-28 10:19 114601.//查找所有嵌套iframevar allIfrs = ... -
什么是同源策略
2012-12-12 11:15 1135一.什么是同源策略 ... -
js 编码,使用java解码方式
2012-10-30 11:02 1628使用两个方法:decodeURIComponent和escap ... -
Cookies
2012-05-04 10:10 1035ookies Cookies 集合设置 coo ...
相关推荐
### 常见浏览器兼容问题 在Web开发中,浏览器兼容性问题一直是开发者们需要面对的重要挑战之一。不同浏览器对CSS、HTML等标准的支持程度不一,常常导致页面在不同浏览器下显示效果各异。本文将根据提供的部分描述,...
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript ...
【CSS浏览器兼容问题详解】 在Web开发中,CSS(层叠样式表)是用于控制网页元素样式的关键技术,但它在不同浏览器之间的兼容性问题一直是开发者面临的挑战。尤其是针对老版本的Internet Explorer(如IE7、IE6)和...
针对360双核浏览器兼容模式的页面显示问题,开发者可以使用内核控制Meta标签来手动指定浏览器应使用的渲染内核。通过在HTML页面的部分添加特定的标签,开发者可以告诉360浏览器使用webkit内核或者IE兼容模式(ie-...
浏览器兼容问题.ppt
### JavaScript 解决浏览器兼容性问题 #### 一、引言 在前端开发中,浏览器兼容性问题一直是开发者面临的重要挑战之一。随着不同浏览器版本的更新迭代,如何确保Web应用能够在各种浏览器环境中正常运行成为了关键...
IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
在前端开发中,浏览器兼容问题一直是开发者面临的一大挑战。不同的浏览器对某些JavaScript语法、DOM操作以及CSS样式的支持程度不尽相同,这导致了在不同浏览器下可能出现功能差异或者页面渲染问题。以下是一些常见的...
浏览器兼容常见问题css兼容 css兼容 浏览器兼容 IE6789兼容
通过上述介绍,我们可以看到在Web开发过程中,解决浏览器兼容性问题的方法多种多样。无论是通过CSS技巧、特殊的选择器还是条件注释,都可以有效地提高网站的跨浏览器兼容性。希望这些知识能够帮助你更好地进行前端...
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
在JavaScript和CSS的世界里,浏览器兼容性问题是一个长期困扰开发者的话题。不同的浏览器对标准的实现可能存在差异,导致代码在某些浏览器上运行正常,而在其他浏览器上可能出现错误或效果不一致。"js浏览器兼容问题...
然而,由于不同浏览器之间对这两种技术的支持程度和实现方式存在差异,导致了跨浏览器兼容性问题的出现。本文主要探讨CSS和JavaScript在IE(Internet Explorer)和其他非IE内核浏览器如Firefox、Chrome、Opera中的...
为了解决这个问题,开发者通常需要借助各种浏览器兼容测试工具来确保网站或应用在主流浏览器上都能正常运行。本篇文章将详细介绍这个主题,并围绕"浏览器兼容测试工具"展开讨论。 首先,我们要理解浏览器兼容性问题...
"Web浏览器兼容工具"就是为了帮助开发者解决这一问题而设计的。这类工具能够帮助我们分析不同浏览器之间的样式差异,提供解决兼容性问题的代码或建议,从而确保网站在各种主流浏览器上都能正常工作。 首先,我们...
在IT领域,尤其是在Web开发中,经常会遇到与中文输入法和浏览器兼容性相关的问题。本文主要探讨了在使用Canvas元素实现文本监听输入时所遇到的bug及其解决方案。 首先,Canvas元素本身并不支持直接记录文字内容,...
浏览器兼容性问题一直是Web开发中的一个棘手挑战,尤其是在历史版本的Internet Explorer(IE)浏览器中,这些问题尤为突出。浏览器兼容性问题主要由于浏览器引擎的bug、网页标准的更新以及不同浏览器对标准的不同...
从提供的文件名称来看,我们可以推测文件内容可能包含了关于浏览器兼容性的实际测试结果和分析。例如,“PCWorld五大主流浏览器决战2010之巅.mht”可能是2010年的一项测试报告,比较了当时五大主流浏览器(可能包括...
浏览器兼容性是指不同的浏览器对于同一段代码可能会有不同的解析方式,从而导致页面在不同的浏览器上显示效果不一致的问题。这是前端开发中非常重要的一个问题,它直接关系到网站或应用在用户端的展示质量。 在讨论...