CSS の互換性とバグの処理-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS の互換性とバグの処理

高洛峰

Feb 18, 2017 pm 03:04 PM

骨灰级清除浮动

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow: hidden;
    *zoom:1; //兼容ie}

内联元素相连之间存在间隙问题

原因:内联元素是当做字体来处理的，字体之间是有间隔的

解决方法:

1.多个标签写在一行

2.将要闭合标签的地方与开始标签的地方重合

3.使用注释头尾相连

4.在父级上写：font-size:0;

5.使用display：block(img是内联元素)

6.使用letter-spacing属性

块级元素包裹内联元素的时候，总会出现几像素的差问题

<!--例子1--><p><img  src="/static/imghwm/default1.png" data-src="http://images.cnblogs.com/cnblogs_com/zqzjs/757818/o_u=3986871593,628400456_fm=21_gp=0.jpg" class="lazy" alt="CSS の互換性とバグの処理" ></p><!--例子2-->

asdasdasd

解决方法：设置内联元素属性:display:block;

CSS垂直居中方法

使用时一定要给出元素宽高

 width: 200px;
        height: 200px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;

CSS Hack

指的是针对不同的浏览器写对应的CSS

有三种hack方式

1.html hack(添加不同的类来区别)

<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]--><!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]--><!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]--><!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->

2.选择器 hack

* html .test{color:#090;} /* For IE6 */* + html .test{color:#ff0;} /* For IE7 */

3.属性hack

color:#fff\0; /*：选择IE8+和Opera*/color:#090\9; /* For IE浏览器 */*color:#f00; /* For IE7 */_color:#ff0; /* For IE6 */

ie6.7不支持box-sizing: border-box问题

解决:使用https://github.com/Schepp/box-sizing-polyfill这个垫片,稳定性差

注意：*behavior: url(../resource/js/lab/boxsizing.htc);这个URL是相对于HTML页面的！！

ul中li下面的间隔线用li布局边框问题

在IE低版本下有bug，会多出li的宽高

解决:间隔线使用li的border去做

ie8及以下的浏览器不支持:befor.:after问题

使用left:expression(eval(document.documentElement.scrollLeft))与top:expression(eval(document.documentElement.scrollTop))

.leftTop{
    position:absolute;
    left:expression(eval(document.documentElement.scrollLeft));
    top:expression(eval(document.documentElement.scrollTop));}

低版本浏览器下position:fixed闪动问题

解决:

*html{ 
  background-image:url(about:blank); 
  background-attachment:fixed;}

IE6双倍margin,padding边距的问题

内部元素一旦浮动，就会出现双倍的BUG

解决:给内部元素添加display:inline属性

IE6中设置宽高位10px的时候出现的是长方形问题

这个现象的另一种情况是:在IE6中定义比较小的高度问题。

原因:IE6有默认行高

解决：使用font-size:0;line-height:0;

IE6无法识别伪对象:first-letter/:first-line问题

类似这样解决:
p:first-letter {}

在first-letter与"{"间增加空格

IE6下忽略!important问题

如下写法在IE6下不起作用

p{
  color:#f00!important;
  color:#000;}

解决:更改写法

p{color:#f00!important;}p{color:#000;}

父元素与子元素之间的margin-top问题(BFC问题)

现象:给第一个子元素设置margin-top属性后，父元素也会下移

代码示例:

 <style>
        .wrapper {
      position: relative;
      width: 500px;
      height: 500px;
      background-color: #ddd;
     }
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
    } 
    </style><p>
        </p><p></p>

解决:

1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）

2、为父元素添加overflow：hidden；样式即可（完美）

3、为父元素或者子元素声明浮动（float：left；可用）

4、为父元素添加border（border:1px solid transparent可用）

5、为父元素或者子元素声明绝对定位

元素浮动导致父元素塌陷问题

见例子:

<p>
        
        </p><p></p>

解决方法：

1.给父元素添加overflow:hidden属性

2.给父元素添加清除浮动伪类

.outer:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        overflow: hidden;
    }

IE6挨着的p元素产生3像素差值问题

解决:使用绝对定位然后内补边

相邻的块状元素margin叠加问题(BFC问题)

见例子:

p{
        margin-bottom: 100px;
        margin-top: 100px;
    }

... <p>
        </p><p>asdasdasdas中国</p>
        <p>asdasdasdas中国</p>
        <p>asdasdasdas中国</p>

结果p直接的margin发生了合并变成了50px。

解决:给最后一个p元素添加left/right浮动，触发BFC。

更多CSS的兼容性与BUG处理相关文章请关注PHP中文网！

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Draggin＆＃039;ドロップピン＆＃039;反応でApr 17, 2025 am 11:52 AM

React Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、

高速ソフトウェアApr 17, 2025 am 11:49 AM

最近、高速ソフトウェアについて素晴らしい相互接続されたことがいくつかありました。

バックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AM

バックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない＆＃039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、

ReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AM

RequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう

ページの上部にスクロールする必要がありますか？Apr 17, 2025 am 11:45 AM

おそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...

Best（GraphQL）APIはあなたが書くものですApr 17, 2025 am 11:36 AM

聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです

毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM

私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。