ブラウザによるpositionのズレ

右の赤枠にある角抜きのデザインにしたいのですが、
上のchromeだと大丈夫なのですが
下のInternet Explorerだとずれてしまいます。

可能であれば、ご教授お願いいたします。

html
1<div class="mainContents">
2
3<div class="contentOuter">
4<h1>大見出し</h1>
5<div class="summaryBox">
6<dl>
7<dt>開催日</dt>
8<dd>2018年〇月〇日（〇）</dd>
9</dl>
10<dl>
11<dt>場所</dt>
12<dd>あああああああああ</dd>
13</dl>
14<a class="link" href="" target="_blank">イベントの主旨や目的はこちらから確認できます<span class="linkIcon-summery linkIcon-img"></span></a>
15
16</div>
17
18<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
19
20</div><!--mainContents-->

css
1
2
3.mainContents {
4position: relative;
5width: 100%;
6padding: 0px 40px;
7margin: 80px 0;
8overflow: hidden;
9}
10
11.mainContents h1{
12display: block;
13font-size: 2.6875rem;
14font-weight: 700;
15margin-bottom: 40px;
16vertical-align: middle;
17text-align: center;
18}
19
20.mainContents h2 {
21display: block;
22font-size: 2rem;
23font-weight: 700;
24margin-bottom: 40px;
25vertical-align: middle;
26text-align: center;
27}
28
29.mainContents h3 {
30font-size: 1.125rem;
31font-weight: 600;
32margin: 8px 0px 16px;
33}
34
35.mainContents p {margin-bottom: 8px;}
36
37.summaryBox{
38float: right;
39width: 50%;
40position: relative;
41margin: 0 0 20px 20px;
42padding: 40px;
43background: #f2f2f2;
44background-position: bottom left, bottom right, top right, top left;
45background-repeat: no-repeat;
46font-size: 0.875rem;
47}
48
49.summaryBox::before{
50content: "";
51display: block;
52position: absolute;
53background-color: #fff;
54width: 10%;
55padding-top: 10%;
56transform-origin: center center;
57-moz-transform-origin: center center;
58-webkit-transform-origin: center center;
59top: 0;
60margin-top: calc( calc( 10% / -2));
61left: calc( calc( 10% / -2));
62transform: rotate(45deg);
63-moz-transform: rotate(45deg);
64-webkit-transform: rotate(45deg);
65}
66
67.summaryBox::after{
68content: "";
69display: block;
70position: absolute;
71background-color: #fff;
72width: 10%;
73padding-top: 10%;
74transform-origin: center center;
75-moz-transform-origin: center center;
76-webkit-transform-origin: center center;
77bottom: 0;
78margin-bottom: calc( calc( 10% / -2));
79right: calc( calc( 10% / -2));
80transform: rotate(45deg);
81-moz-transform: rotate(45deg);
82-webkit-transform: rotate(45deg);
83}
84
85.summaryBox dl{margin-bottom: 8px;}
86
87.summaryBox dt{
88float: left;
89font-weight: 600;
90}
91
92.summaryBox dd{padding-left: 60px;}
93

行動規範の内容に同意します

回答2件

HTMLのインデントを整えてください．div.summaryBoxの閉じタグが抜けています
あと画像がすごく分かりにくいです．こんな感じで色を付けてください．
元の画像だと「角抜き」が何のことを指しているのかさっぱり分かりません

chrome

あと，cssの重複項目や不必要部分は削除してください（例：）

css
1*{/**/
2  padding: 0;
3  margin: 0;
4  box-sizing: border-box;
5}
6
7.mainContents {
8position: relative;
9width: 100%;
10padding: 0px 40px;
11margin: 80px 0;
12overflow: hidden;
13  background: skyblue;/**/
14}
15
16.mainContents h1{
17display: block;
18font-size: 2.6875rem;
19font-weight: 700;
20margin-bottom: 40px;
21vertical-align: middle;
22text-align: center;
23  background: yellow;/**/
24}
25/*
26.mainContents h2 {
27display: block;
28font-size: 2rem;
29font-weight: 700;
30margin-bottom: 40px;
31vertical-align: middle;
32text-align: center;
33}
34
35.mainContents h3 {
36font-size: 1.125rem;
37font-weight: 600;
38margin: 8px 0px 16px;
39}
40*/
41.mainContents p {margin-bottom: 8px;}
42
43.summaryBox{
44float: right;
45width: 50%;
46position: relative;
47margin: 0 0 20px 20px;
48padding: 40px;
49background: #f2f2f2;
50background: palegreen;/**/
51background-position: bottom left, bottom right, top right, top left;
52background-repeat: no-repeat;
53font-size: 0.875rem;
54}
55.summaryBox::after,/**/
56.summaryBox::before{
57content: "";
58display: block;
59position: absolute;
60background-color: #fff;
61width: 10%;
62padding-top: 10%;
63transform-origin: center center;
64-moz-transform-origin: center center;
65-webkit-transform-origin: center center;
66top: 0;
67margin-top: calc( calc( 10% / -2));
68left: calc( calc( 10% / -2));
69transform: rotate(45deg);
70-moz-transform: rotate(45deg);
71-webkit-transform: rotate(45deg);
72}
73
74.summaryBox::after{/*
75content: "";
76display: block;
77position: absolute;
78background-color: #fff;
79width: 10%;
80padding-top: 10%;
81transform-origin: center center;
82-moz-transform-origin: center center;
83-webkit-transform-origin: center center;*/
84bottom: 0;
85margin-bottom: calc( calc( 10% / -2));
86right: calc( calc( 10% / -2));/*
87transform: rotate(45deg);
88-moz-transform: rotate(45deg);
89-webkit-transform: rotate(45deg);*/
90  top: auto;
91  left: auto;
92}
93
94.summaryBox dl{margin-bottom: 8px;}
95
96.summaryBox dt{
97float: left;
98font-weight: 600;
99}
100
101.summaryBox dd{padding-left: 60px;}
102

ここまでやると，position指定が効いており，うまく動いていないのはcalc()の部分だとすぐ分かります

投稿2018/08/20 06:20

編集2018/08/20 06:23

liveasnotes

総合スコア1284

i_tkk

2018/08/20 06:33

分かりづらい質問で大変申し訳ございませんでした。以後、気をつけます。

行動規範の内容に同意します

ベストアンサー

とりあえず、calc( calc( 10% / -2))　を　calc( 10% / -2)にしてみましょう。
手元ではそれで問題なく動きました。

投稿2018/08/20 05:49

yukihisa

総合スコア672

i_tkk

2018/08/20 06:15 編集

( calc)が余計だったのですね... ありがとうございます、とても助かりました。

yukihisa

2018/08/20 06:17

困った時はおかしくなっている部分のCSSプロパティを一旦全て解除して一つずつ追加していくと切り分けが出来て良いですよ。一つずつ検証していけば、適用されるはずの部分がうまくいかないぞ！とわかります。今回の場合はcalcの部分が適用されていなかった+calcが無駄に入れ子になっていたので、そこが原因かな、と当たりを付けました。

行動規範の内容に同意します

あなたの回答