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

CSS应用中不同浏览器的非预期结果与解决办法

    博客分类:
  • CSS
阅读更多

1、<li/>浮动或其下块元素浮动在IE中显示不正常解决

.flt{float:left;display:inline;}

<ul>

      <li>

          <div class="flt">……</div>

          <div class="flt">……</div>

      </li>

</ul>

上面这行代码,在FF里面是正确的,但在IE,哪怕是IE 7都会显示不正常,两个div之间的间隔被扩得很大,即使再加一个div,定义类为

     .split{height:0;font-size:0;line-eight:0;clear:both;overflow:hidden;display:block;visibility:hidden;}

也不会起作用。唯一的解决办法是定义li的高度height:40px;虽然显示都正常了,但我还不知道为什么会这样。

(2009年1月4日)后记:今天终于知道原因了。其实我上面的那段代码不会出现问题,实际上我定义了<ul/>一个属性margin:10px 50px;这时<li/>下的两个元素之间在IE 6和IE 7中都会有大约50px的间距(好像继承了<ul/>的margin属性的一部分),和<ul/>左右边距一样大。如果将它的左右边距设为0,<li/>下的两个元素就紧挨着了(上下边距在IE里还是能显示正常的)。当然,如果不想把要有的空白定义在<ul/>的父级元素,就可以像上面我原来的解决办法一样,给<li/>定义一个高度就OK了!

====================================

(2009年1月12日)后记:<ul/>下的<li/>在IE(即使是IE7)中会继承一部分<ul/>的margin和padding属性:继承margin的左右边距值,继承padding的上下填充值。因此,可以放心地为<ul/>设置上下边距值和左右填充值,但要反过来就要小心了。这都是在<li/>浮动时会有这种情况,当不浮动时就没有必要这么小心了。

 

2、复选框与单选框写法(很多时候都想不起html里面还有一个label标签):

<div><!--复选框-->
<p>
    <input type="checkbox" name="terms" id="terms"/>
    <label for="terms">I have read the terms and conditions</label>
</p>
<p>
    <input type="checkbox" name="offers" id="offers" checked="checked"/>
    <label for="offers">I agree that you can contact me regarding special offers in the future</label>
</p>
</div>

<div><!--单选框-->
<p>
    <input type="radio" name="timeslot" id="morning" value="morning"/>
    <label for="morning">In the morning</label>
    <br/>
    <input type="radio" name="timeslot" id="afternoon" value="afternoon"/>
    <label for="afternoon">In the afternoon</label>
    <br/>
    <input type="radio" name="timeslot" id="evening" value="evening"/>
    <label for="evening">In the evening</label>
</p>
</div> 

 

3、不规则的背景用绝对定位实现,可能会用到z-index(Z-index 仅能在定位元素上奏效),有时这种方法甚至会用到banner上。CSS Zen Garden上就是大量应用的这种方法。

 

4、为实现内容在一个区域滚动,除了作为iframe使用外,可以设定区块大小,同时指定overflow:auto;或根据需要指定overflow-x和overflow-y。

 

5、去掉超链接点击后的虚线框:

           一个最简单的办法,是在<a/>中加入onfocus="this.blur()",可以使超链接在点击后不会出现虚线框。

           之前在书上看到过,通过设置属性或css来去掉,一种方式只有ie支持,另一种方式只有firefox支持,当时还记下了,不过现在用到了想找,缺找不到了。哪位要知道的话麻烦告诉我一下。

 

6、iframe元素,当没有设置scrolling="no"之前,如果没有超出范围,firefox不会显示滚动条,但IE却要显示。

 

7、CSS中text-indent属性在<span/>中不起作用,而要把span设为“display:block;”才可以,不知是不是内联元素都这样。

     还有设置input的pading-left和padding-right不起作用,只能用margin替代。之前好像a可以设置。同样是内联元素,设置时还不一定相同。

 

8、<li/>在IE下有一个默认的大小,用css不可设置,清除浮动时要注意。

     ===========================================

     (2009年2月3日)<li/>在IE下有默认的间距,大概2px。

 

9、ie中如果一个父级元素设定position:relative;那么它的所有子级元素如果浮动,将全部不可见,只要去掉该属性即可。(2009年2月12日)

 

10、<select>在ie6中用浮层无法覆盖,总会透出来,但可以在浮层下加一层<iframe>(将它定义为浮层),这样通过iframe这个层盖住复选框,再在上面放置自己定义好的浮层就表现正常了。(2009年3月3日16:54:57)

 

11、不同的定位方式在ie下可能有问题,如果检查半天找不到ie表现异常的原因,那就查查所有用到定位的元素,很有可能就是它们的原因。

 

12、有时设置一个纵向的平铺图片,由于子元素中有浮动,即使最后进行了浮动清除,也有可能不会显示出来,这时只要设置一个最小高度即可:height:auto;_height:100px;min-height:100px;。(2009-4-13)

 

13、ie下左右边线(border)段线(部分忽隐忽现)问题:如果容器内有两个浮动,并用CLEAR清除浮动。在ie下拖动滚动条时最外层的border会消失,如果给最外层加上宽度或者高度就不会出现。这是一个奇怪的现象,目前还不能解释是什么原因所导致的。(2009-4-16 10:58:58)

 

14、IE下如果设置了LI的高度,会出现渲染错误,原因我也不知道,但是可以使用line-height代替height,就没有问题了。或者float一下也可以。还有,在ie下ul浮动后下面会有一个默认的高度,但为啥,还未知,我所用的解决办法也只有定义父级元素的高度。

 

15、如果ul设为浮动,这时为ul设定padding或margin会出现问题,ie下li会部分继承(参考第1条)。

       如果li向左浮动排成一排,若li里面有块级元素,必须设定里面的块级元素也向左浮动,否则ie下会莫名其妙的li加宽,出现不是自己预期的结果(一般是1像素)。即使这样,有时仍有问题,不会出现预期效果。

 

16、实在找不到原因又懒得去找时可以用(我总记不清怎么写)

        <!--[if IE]>
        <style type="text/css">

 

        </style>
        <![endif]-->

 

 

分享到:
评论

相关推荐

    CSS在不同浏览器的兼容性问题

    - **框架与库的应用**:借助成熟的前端框架(如Bootstrap)或库(如Normalize.css),它们通常已经解决了大部分兼容性问题,可以简化开发过程。 综上所述,CSS在不同浏览器上的兼容性问题是一个复杂但可管理的挑战...

    为什么div css网页在FF浏览器中不能水平居中呢.docx

    综上所述,要解决“为什么div css网页在FF浏览器中不能水平居中”的问题,关键是理解并正确应用CSS布局原则,同时注意浏览器之间的差异和兼容性问题。通过调整CSS样式、清除浮动、使用正确的前缀、保持盒模型一致...

    CSS在浏览器中的兼容性及使用技巧

    本文主要探讨CSS在浏览器中的兼容性问题及其解决方案,并分享一些实用的使用技巧。 首先,我们需要理解CSS的基本概念。CSS是一种样式表语言,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它的...

    web打印(纯jq和css,不用浏览器控件)

    `print.css`文件是专门为打印设计的样式表,与屏幕显示的样式(通常在`style.css`或`main.css`中)可能有所不同。在`print.css`中,我们可以隐藏不需要打印的元素,调整布局以适应纸张格式,设置字体大小,颜色等,...

    CSS浏览器兼容性问题.pdf

    尽管`border-image`提供了强大的设计可能性,但其在不同浏览器中的表现不一致,可能导致一些预期外的结果。开发者在使用时需要谨慎,并针对各种浏览器进行测试和调整,以确保在所有目标平台上都能正常工作。 综上所...

    在低版本浏览器中css line.docx

    通过以上方式修改CSS的`font-family`属性,确保低版本浏览器能够识别并应用正确的字体,从而使得`line-height`的设置生效,达到预期的行间距效果。 除了字体设置外,理解`line-height`属性本身也很重要。`line-...

    CSS浏览器兼容问题整理(IE6.0、IE7.0_与_FireFox)

    标题和描述均指向了一个核心议题——CSS在不同浏览器(尤其是IE6.0、IE7.0与Firefox)之间的兼容性问题。这个问题对于Web开发者来说至关重要,因为不同的浏览器可能对CSS的解析和渲染方式存在差异,导致网页在不同...

    CSS浏览器兼容性问题收集.pdf

    标题中的“CSS浏览器兼容性问题收集.pdf”暗示了本文档主要关注CSS在不同浏览器中的兼容性问题,特别是CSS3的一些新特性。描述中提到的“CSS3 border-image”是CSS3的一个新特性,用于自定义元素边框的样式,允许...

    jQuery支持多种切换效果的CSS3焦点图代码,支持自定义切换效果。兼容主流浏览器

    在实际应用中,开发者需要根据目标用户的浏览器分布来决定兼容性的范围,因为过度的向后兼容可能会增加代码的复杂性和加载时间。 在提供的`README.md`文件中,通常会包含项目的介绍、安装步骤、使用示例、API文档和...

    最全的CSS浏览器兼容问题

    随着Web技术的发展与进步,浏览器兼容性问题一直是前端开发中的重点难点之一。不同浏览器对CSS的支持程度各异,这给开发者带来了诸多挑战。本文将根据多年的实践经验以及网上收集到的经验分享,整理总结常见的CSS...

    css_hack csshack技术

    由于不同浏览器(包括同一浏览器的不同版本)对CSS的支持程度存在差异,这导致了在不同浏览器环境下页面渲染效果可能会有所不同。为了应对这一挑战,开发者们创造了一种特殊的技术手段——**CSS Hack**,以确保页面...

    浏览器兼容

    浏览器兼容性是Web开发中不可避免的挑战,但通过深入了解不同浏览器的行为差异,并运用适当的CSS技巧和JavaScript函数,可以有效地克服这些挑战,实现高质量、高兼容性的Web应用。开发者应当持续关注最新的Web标准和...

    css3自适应浏览器图片布局特效.zip

    在现代网页设计中,CSS3已经成为了不可或缺的一部分,它提供了许多强大的功能,其中包括自适应浏览器图片布局特效。这个“css3自适应浏览器图片布局特效.zip”文件包含了一套实用的代码,可以确保图片在不同设备和...

    CSS权威指南 第3版

    10. 兼容性与跨浏览器开发:讨论CSS在不同浏览器中的兼容性问题,以及如何通过各种技巧确保网站在主流浏览器中的统一表现。 由于书籍标题中出现了三次重复的标题,这可能是出版时的失误或OCR扫描时的问题。在内容...

    详解css定位与定位应用

    ### 详解CSS定位与定位应用 #### CSS定位概述 定位技术是Web开发中不可或缺的一部分,尤其是在页面布局的设计过程中。良好的定位技巧能够帮助开发者构建出既美观又实用的网站界面。CSS提供了多种定位方式,包括...

    css_bug与解决方法

    描述详述:本文旨在探讨并提供解决各种浏览器中的CSS bug的方法与技巧。在Web开发中,CSS(层叠样式表)是实现网页美观设计的关键技术之一,但不同浏览器对CSS的支持程度和解析方式存在差异,这往往导致CSS bug的...

    不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案.docx

    开发者可以借助像CanIUse这样的在线工具,查看各种浏览器版本对CORS以及其他前端技术如CSS Grid Layout、CSS Flexible Box Layout Module和ECMAScript 2015 (ES6)的支持情况,以便在不同浏览器间进行兼容性优化。...

    HTML5CSS3新特性的浏览器支持情况.pdf

    通过在元素上应用特定的CSS属性,然后检查样式是否被正确应用或行为是否按预期工作。 由于IE浏览器对新特性的支持较慢,尤其是早期版本,开发者通常需要借助像Modernizr这样的库来帮助检测和提供回退方案。...

    css常见考题 !!css常见考题 css常见考题

    - **问题描述:** 在IE5和IE6中,`div`的实际宽度可能会与预期不符。 - **解决方案:** - 使用`!important`和条件注释来修复IE5和IE6的盒模型问题。 - **示例代码:** ```css .box-model-fix { width: 300px !...

Global site tag (gtag.js) - Google Analytics