CSS圓形菜單是一個非常方便的web設計工具，但是在IE瀏覽器下較難兼容。我們可以通過以下方法來解決這個問題。

//以4個子菜單為例
.menu { 
position: relative; 
overflow: hidden; 
width: 400px; 
height: 400px; 
margin: 0 auto; 
margin-top: 50px; 
border-radius: 50%;
}
.menu:after { 
content: ""; 
display: block; 
padding-top: 100%; 
}
.menu-item { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}
.menu-item a { 
position: absolute; 
display: block; 
font-size: 1.5em; 
text-align: center;
}
.menu-item a:hover { 
transform: scale(1.2); 
z-index: 1;
}
.menu-item:nth-child(1) a { 
top: 0%;
left: 50%; 
transform: translate(-50%, -50%); 
}
.menu-item:nth-child(2) a { 
top: 50%; 
left: 0%;
transform: translate(-50%, -50%); 
}
.menu-item:nth-child(3) a { 
top: 50%; 
right: 0%;
transform: translate(50%, -50%); 
}
.menu-item:nth-child(4) a { 
bottom: 0%;
left: 50%; 
transform: translate(-50%, 50%); 
}
//IE兼容代碼

在ie瀏覽器下，我們需要將子菜單設置成左浮動，并將子菜單a標簽的position屬性設置成static，并將display屬性設置成inline-block。這樣即可完成兼容IE的設計。