ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文

  メンテナンス 前画面に戻る

対象スレッド 件名: IE9で、一つの DIV でフィルタでグラデーションした上で角丸するとうまく行きません。もう一つの DIV を外側から overflow:hidden で囲みます。
名前: lightbox
処理選択
パスワード

件名 IE9で、一つの DIV でフィルタでグラデーションした上で角丸するとうまく行きません。もう一つの DIV を外側から overflow:hidden で囲みます。
名前 lightbox
コメント
@DIV
<style type="text/css">
.gradient {
    width: 200px;
    height: 200px;

    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;

    background-color: #444444;
    background: -webkit-linear-gradient(top, #444444, #999999); 
    background:    -moz-linear-gradient(top, #444444, #999999); 
    background:      -o-linear-gradient(top, #444444, #999999);
    background:         linear-gradient(to bottom, #444444, #999999);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; 

    border: 5px solid grey;
}
</style></head>
<body>
<div id="target" class="gradient"></div>

<script type="text/javascript">
(function() {
var userAgent = window.navigator.userAgent.toLowerCase();
var str = "";
if (userAgent.indexOf("msie") > -1) {
	str+="<style type=\"text/css\"> \n";
	str+=".gradient { \n";
	str+="    border: 0; \n";
	str+="} \n";
	str+=".ie9 { \n";
	str+="    overflow: hidden; \n";
	str+="    border-radius: 30px; \n";
	str+="    border: 5px solid grey; \n";
	str+="    width: 200px; \n";
	str+="    height: 200px; \n";
	str+="} \n";
	str+="</style> \n";
	str+=" ";
	document.write( str );
	var ie9 = document.createElement("div");
	ie9.setAttribute("class","ie9");
	var baseParent = document.getElementById("target").parentElement;
	baseParent.insertBefore(ie9,document.getElementById("target"));
	ie9.appendChild(document.getElementById("target"));
}
})();
</script>
@END

https://lh6.googleusercontent.com/-0vaXN5Yg_Yo/UR6bNCRnGxI/AAAAAAAALzM/XrdqIZElq1w/s243/_img.jpg


https://lh6.googleusercontent.com/-qOtBEX1wkvY/UR6bNJxrWNI/AAAAAAAALzI/5E0G_ZYDdTM/s230/_img2.jpg