CSS跨浏览器如何调试

问题描述

我在做页面的过程中,!important的css hack对IE 6.0 和 IE 8.0调试完毕后,使用搜狗浏览器貌似有些许出入,搜狗浏览器的标准莫非另有一套,很无奈啊,各位达人有什么好招没有解决搜狗的问题。附上我做的一个页面,因为大小有限制,就没多传,请各位指正。 body{padding: 35px 0px 35px 10px;}#rq{ width:1024px;height:1502px;margin:0 auto;background:url(../tp/bj.jpg);border:thin #0000FF dashed;}#head{position: relative;width: 1024px;height: 310px;background:url(../tp/head.png);border:thin #0000FF dashed;}/*******************************************/#dhl{ width:auto; height:43px; background: url('../tp/dhl.png') no-repeat; padding-top:8px !important; padding-top:5px; border:thin #FF0000 dashed;}#dhl_sy{ float:left; width:60px; height:30px; margin-left: 80px !important; margin-left:10px; border:thin #FF0000 dashed; } #dhl_ts{ float:left; width:130px; height:30px; margin-left:50px !important; margin-left:35px; border:thin #FF0000 dashed; } #dhl_sn{ float:left; width:230px; height:30px; margin-left:50px !important; margin-left:45px; border:thin #FF0000 dashed; } #dhl_xs{ float:left; width:128px; height:30px; margin-left:43px !important; margin-left:42px; border:thin #FF0000 dashed; } #dhl_lq{ float:left; width:130px; height:30px; margin-left:43px; border:thin #FFFFFF dashed; } /*******************************/ #tssn{ height:390px; background: url(../tp/tssn.png); border:thin #FF0000 dashed;} #snxs{ height:204px; background: url(../tp/snxsfb.png); border:thin #FF0000 dashed;} /**************************************/#xsdh{ height:230px; background:url(../tp/xsdhfb.png); padding-top: 65px; padding-left: 38px; border:thin #FF0000 dashed;} #bk{ float: left; width: 250px; height: 110px; margin-left:35px; background:url(../tp/xhk.png); border:thin #FFFF00 dashed; }/*************************************/#lqzt{ height:173px; padding-top:23px; border: thin #00FF00 dashed; } #lq_bt{ height: 55px; line-height:55px; font-family:"宋体"; text-align:center; font-size:23px; border: thin #0000FF dashed;} #lq_zt{ height: 110px; border: thin #000000 dashed;}问题补充 另外的页面一并传上,个人感觉使用background:url的时候,调整图片的工序比较费时,费力!大家的心得和技巧,请献上! 问题补充:&nbsp; 谢谢了,我的邮箱是jsjfengjie@163.com,研究一下,否则网站变形之后,Boss老是找我麻烦&nbsp;<img src="/images/smiles/icon_biggrin.gif"/> <br /><br /><div class="quote_title">yangshancheng 写道</div><div class="quote_div">貌似&nbsp; 360的内核就是IE的吧。&nbsp; 一般都调试&nbsp; IE&nbsp; FF 遨游 跟 谷歌浏览器吧 我有份&nbsp; CSS各大浏览器兼容问题的 pdf文件。 如果你要 我发给你&nbsp; </div><br />

解决方案

貌似 360的内核就是IE的吧。 一般都调试 IE FF 遨游 跟 谷歌浏览器吧 我有份 CSS各大浏览器兼容问题的 pdf文件。 如果你要 我发给你
解决方案二:
CSSVista,这是一个css调试利器
解决方案三:
各个浏览器之间是有区别的! 有的时候区别还很大!js 和css 都一样! 我也是 搞 java web开发的!我们都装了 7个浏览器!我们网站一般只处理 IE6----IE8 TT 和 360浏览器 期待吧! 等待 某个浏览器 一统天下 之后 定义个标准吧!!
解决方案四:
参见:http://demojava.iteye.com/blog/746852

时间: 2024-07-28 18:07:56

CSS跨浏览器如何调试的相关文章

用CSS跨浏览器管理网页中图片的透明度

css|浏览器|透明|网页 在网页制作过程中,我们会想用CSS来管理图片的透明度,但是用CSS来管理图片要根据不同的浏览器来进行设置.本教程只是冰山一角,目的提醒大家当使用DIV+CSS制作网页时最终效果最少应该用两种不同浏览器来进行测试. 这个教程我们就针对目前使用最多的浏览器来进行讲解. Firefox: 在Firefox中样式表CSS用-moz-opacity: xx来表示透明度的,xx是一个0到1之间的数代码如下: <img style="-moz-opacity:0.5"

css 跨浏览器实现float:center_经验交流

复制代码 代码如下: <div id="macji"> <ul class="macji-skin"> <li>列表一</li> <li>列表二</li> <li>列表三</li> </ul> </div> 我们希望实现li是浮动的,并且居中的(li个数不固定,ul宽度未知).可以设置ul的text-align:center,再设置li的displ

如何调试CSS的跨浏览器样式bug

首先要做的是挑选一个好的浏览器.我的选择是Chrome,因为它拥有强大的调试工具.当我在Chrome上完成调试后,我会接着在Safari或者Firefox上调试. 如果在这些"好的"浏览器上没有达到期望的效果,很有可能是代码本身违背了CSS规则.不要试图使用hack方法来解决在这些"好的"浏览器上出现的问题,而是应该找出问题的原因.通常我会检查以下可能的BUG出处: HTML代码解释 - 你是否忘记闭合一个标签? 你是否用一个inline元素包住一个block元素?

跨浏览器的Flexbox:CSS Flexible盒模型3

文章简介:CSS Flexible盒模型3又简称为Flexbox.摒弃我们传统上使用的一些hack和组件,Flexbox给网络的发展带来了很多正能量和兴奋济,让我们一起把复杂的网站布局变得简易和快速. 简介 CSS Flexible盒模型3又简称为Flexbox.摒弃我们传统上使用的一些hack和组件,Flexbox给网络的发展带来了很多正能量和兴奋济,让我们一起把复杂的网站布局变得简易和快速.早前在Flexbox: fast track to layout nirvana?一文中介绍了Flex

网页设计技巧:跨浏览器的CSS固定定位

css|技巧|浏览器|设计|网页|网页设计 跨浏览器的CSS固定定位{position:fixed} 不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{position:fixed}来实现的,通过它可以让HTML元素脱离文档流固定在浏览器的某个位置. IE7.Firefox.Opera,都支持CSS的{position:fixed},所以很容易实现(

编写跨浏览器兼容的 CSS代码的金科玉律

作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧. 理解 CSS 盒子模型 如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器. CSS 盒子模型负责

解决跨浏览器兼容的CSS编码准则

浏览器越来越多,也就意味着做web前端开发的就越困难.现在的浏览器的内核都同,对于css的兼容也会有一定的差别!以前讲的用css hack来也不是一件容易的事,用过多的css hack来兼容也会出现许多臃肿的代码:所以掌握一些跨浏览器兼容的css编码准则是非常有必要的. 第一:理解css盒子模型(学习div+css布局也是很重要的,学会的css的盒子模型学习div+css也就不难了) 透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE

css与javascript跨浏览器兼容性总结_javascript技巧

本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题.分享给大家供大家参考.具体总结如下: 一.CSS样式兼容性 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因.如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV.解决办法: 1) 给父DIV也设上float 2) 在

如何搭建自动化、跨浏览器的 JavaScript 单元测试

本文讲的是如何搭建自动化.跨浏览器的 JavaScript 单元测试, 我们都知道在各个不同的浏览器环境里测试代码是很重要的,并且在大多数时候,我们这些 Web 开发者在这一点上还是做的不错的 -- 至少在第一次发布项目的时候是这样. 然而我们每次更改代码之后的测试工作,却做的不尽人意. 我深切地知道我本人就是这样的 -- 我早就把"学习怎样搭建自动化.跨浏览器的 JavaScript 单元测试"写在 To-do List 上了,但每当我坐下来想要真正的去解决这个问题的时候,我却不得不