高さの分からない要素にpaddingを指定しるとずれが起こる

Question

解決させたいことは、paddingを付けるとマウスオーバー時にテキストが一瞬ずれてしまいます。
どうしても、padding-topとpadding-bottomが必要なのですが、最初のずれの対処方法はありますでしょうか。

.menu-item-listでhiddenにしている要素にvisibleにさせたときにpaddingなしの時はずれは起こりません。

.menu-item-list {
    line-height: 30px;
    opacity: 0;
	top: 50%;
    right: 0;
    left: 0;
   position: absolute;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 16px;
    visibility: hidden;
    -webkit-transition: opacity,visibility, .75s ease-in-out;
    transition: opacity,visibility, .75s ease-in-out;
 
   padding: 8% 0;
} 


.menu-area-inner:hover .menu-item-list {
    opacity: 1;
    visibility:visible;    
   background: rgba(245,247,250,.75);
 padding: 8% 0;
 }

Comments

[kei344]

ずれが起こる環境と「ずれ」のスクリーンショットなど追記可能でしょうか。

[退会済みユーザー]

mac os 10.8
chrome ver.49になります。
safari ver.9でも同じ現象です。

Answer 1

padding: 8% 0; を削除して擬似要素で上下のパディングを実装するか、.menu-item-list に内包要素を作るのが手早いような気がします。

.menu-item-list::before,
.menu-item-list::after {
    content: "";
    height: 2em; /* ここでは%での指定は出来ない */
    display: block;
    width: 100%;
}
```ちなみに元のサイトの状態で、Windows Chrome/IE11で問題なく動作し、Macは確かに再現しました。ちなみにFirefoxでは別の崩れがありましたが、もう過去のブラウザって言うことですね･･･。

Comments

[退会済みユーザー]

before,afterで無事解決いたしました。
疑似クラスが思いつかず、誠にありがとうございます。
また、Windows Chrome/IE11のチェックまでありがとうございます。

Firefoxの対応を必須で、今原因を調べておりまして、
display:flexの子itemのmarginが効いておらず、inline-blockを試しているのですが、
解決に至っておりません。。

[退会済みユーザー]

firefoxは、単位%は適用されず、pxですと反映されました。
これは、バグにあたるのでしょうかね？
バージョンは、Fire fox 46.0.1 のMacです。

[kei344]

単位%が効かないのは要素をWrapしている要素のHeightが確定していないからだと思われます。要素サイズの変わる要素を基準に単位%を使うとFirefoxに限らずそういうことが多々あります。

Flexboxを使っているなら縦方向も均等配置が出来たと思うので、それを試されてはいかがでしょうか。

【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024