[css]いくつかの互換性(奇妙な)問題

4975 ワード

垂直中央オフセットの問題
line-height
アンドロイドでは上へシフトする現象が現れる.(iosで落下する可能性がある....原因は不明)
理由:

は奇数文字を使用している可能性があります.

は、12 px未満の番号である可能性があります.

本質的な原因:Androidはレイアウト計算時にprimyfontフォントの関連属性(すなわちHHead Asscent、HHead Descentなど)を参考にしたのかもしれないが、primyfontの検索はfont-familyのどのフォントがfontsにあるかを見ることである.xmlでは最初に一致しますが、原生Androidでは中国語のフォントにfamily nameがなく、一致した上では常に中国語のフォントではないので、この問題を解決するにはfont-familyで中国語を明示的に申明したり、どのような方法ですべての文字がfallbackから中国語のフォントに保証されたりします.
ソリューション:

Android 7.0+デバイス:

 langプロパティ:， font-family ， font-family: sans-serif.この はブラウザのフォントfallbackメカニズムを して、 にも のフォントを って させ、blinkの のカーネルはfallbackメカニズムに があり、Android 7.0+ ok、 のカーネルの で fallbackをNoto Sans Myanmarに く、このフォントは に い.

 
 MIUI 8.0+ ： font-family: miui .この は を に らかにする で、MIUIは8.0+に を し、fonts.xmlではこのフォントにfamily name：miuiを しているので、 することができます.
 フォントサイズは ではなく、2で り れる で12 px である があります.
  IOSは の に ですがAndroidではありません. えばAndroid の1.3px = 1.5px = 1.7px = 1px;は が されるということですが、IOS では きな いがあり、この を して の を することができます. えばpadding-top: 10.1px;とpadding-bottom: 9.9px; Android ではpadding-top: 10px; padding-bottom: 9px; 
になります. border: 1px solid transparent; 

( padding ....)
align-items
 ，flex 。
 。
inline-block 
 font-size:0 
disabled 
input のフォントの は、disabledを えて します.
-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */ 
 
ios 
いくつか?ios は、スクロールバーが まで るとfixedのdomに れるclickイベントが し、-webkit-overflow-scrolling: touchで します.-webkit-overflow-scrolling: touchが っ るdomが fixedのfooterを っている があります. のdomはz-indexに できないことに してください.
-webkit-overflow-scrolling: touch; fixedとともに な が しやすく、 をお めしません.
ios ステータスバー、h 5は で マージンを する があります.そうしないとステータスバーと なります.ios ステータスバーの は ずしも くないので、 する がある があります.
 はpadding-bottomで の さを える、ios 9でスクロールバー の が する があり、 で えることに できる.
ios transform/transition / ,     backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
 
 の は です...
アンドロイド
 のアンドロイドは に ではなく、 したり、 に したりする があります.0.5pxが する.rgbaの は0と することができる.
padding 
 では、paddingで を げ、 げた がバインドされたイベントをトリガーできない があります.( はcursor:pointerを えて に つかどうか してみます)
 の ではpaddingが を げられない があります.
font-weight 
PC 500,600は なし、モバイル は あり
 clickはmouseleaveをトリガーします
 はわかりませんが、このような で できます.      let a = document.getElementById('a');
      a.addEventListener('click', (e) => {
        console.log('click trigger')
      })
      a.addEventListener('mouseleave', (e) => {
        if (e.relatedTarget) {
          console.log('mouseleave trigger')
        }
      })
 
わけのわからない 
 にはブロック のため、inline-blockまたはBFC( に.clearfix)を して できます.
divとimgの に がある
 などのinline はデフォルトで のbaselineと しているが、baselineは レベルの と の (この はfont-size、font-familyに しており、 ずしも5 pxではない)を っているため、vertical-align:top/bottom/text-top/text-bottomを しても できる. のblock にimgが まれている もこの があります.は、 imgタグdisplay:blockに える.
 は、 font-size:0またはline-height:0を .
 は、ピクチャimgタグvertical-align:bottomまたはvertical-align:middleまたはvertical-align:topを .
 
html をスペースとして 
 はブラウザでスペースとして され、スペースとリターンは3 pxのスペースとして されます. で にcss {font-size:0}を えることができます.これにより にスペースが れることはない.
box-shadowは の を しますfloat: leftはbox-shadowの をクリアできるようです
box-sizing 
 エレメントにborderがある、box-sizing:border-boxが されており、 エレメントwidth 100%では、 する エレメント が れず、borderの は れない.のように.father {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid black;
}
.son {
  width: 100%;
  height: 100%;
}
 
sonのアスペクトは98 pxである.この borderをsonに れたほうがいいかもしれません.
svg 
svgでbackground-imageを るのはあまりよくないようです
animation 
 の を にすると、 のanimationに れます.
0.5px 
0.5 pxはipxに がある があります. にborderでは、 が けている があります.
 :https://www.cnblogs.com/qingmingsang/articles/8414101.html

個人メモ1:displayとvisibilityの使い方

欲張り:ジャンプゲーム