質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2234閲覧

firefoxでabsoluteのleftに対しての単位%が効かない対処法

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/06/04 12:29

編集2016/12/17 01:42

解決させたいことは、position absoluteでleft:100%にしている要素が効きません。
しかし、top:35%のtopに対しては適応されております。

また、mac os 10.8でchrome ver.49とsafari ver6ではleft:100%は適用されております。

こちら、原因と対処方法をご教授いただけますでしょうか。

@-webkit-keyframes marquee { 0% { -webkit-transform: translate(0,0);} 100% { -webkit-transform: translate(-100%,0);} } @keyframes marquee { 0% { transform: translateX(0);} 100% { transform: translateX(-100%);} } .six-slidebox{ top: 5%; width: auto; bottom: 5%; height: 90%; margin: auto; position: absolute; right: 80px; left: 180px; } svg#front-six, svg#back-six { fill: #fff; z-index: 10; } svg#front-six-blk, svg#back-six-blk { fill: #000; z-index: 1; } svg#front-six,svg#back-six,svg#front-six-blk,svg#back-six-blk{ position: absolute!important; top: 35%; -webkit-animation-name: marquee; -webkit-animation-timing-function: linear; -webkit-animation-duration: 30s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 1s; -webkit-animation-play-state: running; -webkit-animation-direction:normal; animation-name: marquee; animation-timing-function: linear; animation-duration: 30s; animation-iteration-count: infinite; animation-delay: 1s; animation-play-state: running; animation-direction:normal; } svg#front-six-blk { left: 0%!important; } svg#front-six { left: -0.15%!important; } svg#back-six-blk { left: 100%!important; } svg#back-six { left: 100%!important; } .six-img { display: block; z-index: 2; position: absolute; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover!important; top: 0; bottom: 0; right: 0!important; left: 0!important; width: 100%; height: 100%; margin: auto; overflow: hidden; background-color: rgba(255,255,255,0); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

@-moz-document url-prefix() {
svg#back-six-blk {
left: 100%!important;
position: relative;
top: 35%;

-webkit-animation-name: marquee; -webkit-animation-timing-function: linear; -webkit-animation-duration: 30s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 1s; -webkit-animation-play-state: running; -webkit-animation-direction:normal; animation-name: marquee; animation-timing-function: linear; animation-duration: 30s; animation-iteration-count: infinite; animation-delay: 1s; animation-play-state: running; animation-direction:normal;

}

svg#back-six {
left: 100%!important;
position: relative;
top: 35%;

-webkit-animation-name: marquee; -webkit-animation-timing-function: linear; -webkit-animation-duration: 30s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 1s; -webkit-animation-play-state: running; -webkit-animation-direction:normal; animation-name: marquee; animation-timing-function: linear; animation-duration: 30s; animation-iteration-count: infinite; animation-delay: 1s; animation-play-state: running; animation-direction:normal;

}
}

投稿2016/06/04 16:06

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問