关于浏览器的兼容性问题,我认为可以从浏览器对CSS标记属性的默认解释不统一来说:
比如:margin-left:这个属性在使用float:的情况下会双倍显示距离,所以一旦这样使用了那么在IE6、7、8、9中显示的距离就不一样,所以就不兼容了。建议使用padding-left:来代替margin-left: 【住:margin的其他属性均正常,可以正常使用,padding的所有属性均正常,可以正常使用,不存在浏览器解释不一样的问题】
另外 margin padding 属性在不同的浏览器的解释也各不相同,解决方法为统一的把他们归0:【margin:0px;padding:0px;】;
同样标记也是如此:不同的标记在不同的浏览器解释也有所不同:主要同样是表现在margin padding上,方法同上;
CSS基本样式如下:
@charset "GB2312" /* 默认编码方式 */
/* CSS Document */
div,span,img{
margin:0px;
padding:0px;
}
p,ul,ol,li{
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px;
font-size:12px;
color:#3e3e3e;
}
li{
list-style-type:none;
}
a{
text-decoration:none;
color:#000000;
outline: none; /* 解决点击链接产生虚线边框 */
}
a:hover{
text-decoration:none;
}
a img{
border:0;
}
CSS基本写法如下:
.main{
width:1000px;
height:auto;
margin:0 auto;
}
.main .top{
width:1000px;
height:126px;
float:left;
background:url(../images/top_r1_c1.jpg) no-repeat;
}
.main .top .top_p1{
width:97%;
height:40px;
line-height:40px;
float:left;
padding-right:3%;
text-align:right;
}
.main .top .top_p1 span{
width:100px;
font-size:14px;
font-weight:bold;
color:#999999;
}
.main .top .top_p1 span.t_sp{
font-size:18px;
color:#666666;
}
.main .top .dh{
width:1000px;
height:auto;
color:#666666;
float:left;
padding-top:20px;
}
.main .top .dh ul{
width:958px;
padding-left:2px;
height:26px;
margin:0 auto;
background-color:#F2F2F2;
}
.main .top .dh ul li{
width:105px;
height:22px;
line-height:22px;
margin-left:1px;
float:left;
background-color:#666666;
}
.main .top .dh ul li a{
float:left;
width:105px;
font-size:14px;
color:#FFFFFF;
text-align:center;
display:block;
font-weight:bold; /*#99CC00*/
}
.main .top .dh ul li a:hover{
background-color:#99CC00;
}
.main .top .dh ul li a.dh_a{
background-color:#99CC00;
}
建议所有标记全部使用float:left或者right属性
分享到:
相关推荐
解决浏览器兼容问题的 CSS 语法技巧大全 CSS 兼容性问题是 web 开发中常见的问题之一,如何解决浏览器之间的兼容性问题是每个 web 开发者都需要面临的问题。下面是解决浏览器兼容问题的 CSS 语法技巧大全,涵盖了 ...
本文将深入探讨如何使用CSS来解决浏览器兼容问题。 首先,我们来看一个关键的CSS技巧:`!important`。`!important`是CSS1规范中的一个特性,其目的是提升样式规则的优先级。当一个CSS规则后面跟上了`!important`,...
在进行Web开发时,了解并解决浏览器兼容问题是十分必要的。通过使用 CSS Reset 技术、针对特定浏览器的解决方案以及利用现代浏览器支持的新特性,可以有效提高网页在各种浏览器下的兼容性和用户体验。希望本文介绍的...
IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
### JavaScript 解决浏览器兼容性问题 #### 一、引言 在前端开发中,浏览器兼容性问题一直是开发者面临的重要挑战之一。随着不同浏览器版本的更新迭代,如何确保Web应用能够在各种浏览器环境中正常运行成为了关键...
本篇将深入探讨如何解决浏览器兼容问题,帮助您确保网站或应用在各种主流浏览器上都能正常运行。 一、了解浏览器内核 首先,我们要明白浏览器兼容性问题的根源在于各浏览器所使用的内核不同,常见的有以下几类: 1...
在IT领域,尤其是在Web...总之,解决浏览器兼容问题需要开发者具备扎实的Web基础知识,了解各浏览器的特性,同时利用现代化的开发工具和最佳实践。通过编写兼容性强的代码,确保应用在不同环境下的稳定性和用户体验。
【CSS浏览器兼容问题详解】 在Web开发中,CSS(层叠样式表)是用于控制网页元素样式的关键技术,但它在不同浏览器之间的兼容性问题一直是开发者面临的挑战。尤其是针对老版本的Internet Explorer(如IE7、IE6)和...
浏览器兼容问题在IT行业中是一个长期存在的挑战,尤其是在JavaScript应用开发中。由于不同的浏览器,如Internet Explorer...然而,对于那些仍需支持旧版浏览器的项目,理解和解决浏览器兼容问题仍然是一个重要的任务。
总结来说,解决360双核浏览器兼容模式的页面显示问题,需要开发者了解其双核机制并合理使用内核控制Meta标签。此外,了解页面所依赖的技术特性,选择正确的内核渲染,是确保网站在360浏览器中正常显示的关键。开发者...
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
这里我们将深入探讨ASP(Active Server Pages)后台生成静态页面时,解决浏览器兼容问题的相关知识点。 1. **ASP基础**: ASP是微软开发的一种服务器端脚本环境,用于生成动态网页。它允许开发者在HTML代码中嵌入...
### JavaScript 解决 `innerText` 浏览器兼容性问题 #### 背景介绍 在 Web 开发过程中,经常会遇到需要获取或修改 HTML 元素内部文本的需求。JavaScript 提供了多种方法来实现这一功能,其中较为常用的是 `...
解决浏览器兼容问题的一种常见方法是使用CSS Hack。CSS Hack是通过特定的语法结构来针对不同浏览器进行样式设定。例如,对于IE6和FF的区别,可以写为`background:orange;*background:blue;`,其中星号(*)前缀的样式...
在前端开发中,浏览器兼容问题一直是开发者面临的一大挑战。不同的浏览器对某些JavaScript语法、DOM操作以及CSS样式的支持程度不尽相同,这导致了在不同浏览器下可能出现功能差异或者页面渲染问题。以下是一些常见的...
### 浏览器的CSS兼容问题详解 在Web开发领域,浏览器兼容...总之,解决浏览器兼容问题是一个系统工程,需要开发者综合运用多种策略和技术,不断测试和优化,才能确保网站在各种设备和浏览器上都能提供良好的用户体验。
文件里面包含两个文件,一个是browser.min,一个是polyfill.min,只需要简单的把这个两个文件引入,即可解决部分浏览器不兼容es6的语法的问题, 一、使浏览器兼容ES6基本语法:...购买一个内容解决浏览器兼容问题,
总的来说,解决JS和CSS的浏览器兼容问题需要深入理解各种浏览器的特性和限制,遵循编码最佳实践,并利用工具和库来简化工作。通过持续学习和实践,开发者可以创建出在广泛浏览器环境中都能良好运行的Web应用。