有什么想法吗?
我有一个网站的边界半径工作在IE9有时,但不是其他的。我还包括了…
<meta http-equiv="X-UA-Compatible" content="IE=9" />
标题中的。这似乎对出席与否没有什么影响。它适用于页面的各个部分,如下面…
#nav a {
font-weight: bold;
color: #fff;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
border-radius: 1.6em;
/* text-shadow: 0 1px 1px rgba(0, 0, 0, .3); */
font-size: 18px;
background-color:rgba(72,124,158,0);
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
但在下面的例子中没有
nav {
margin: 0;
padding: 0;
line-height: 100%;
-webkit-border-top-left-radius: 2em;
-moz-border-radius-topleft: 2em;
border-top-left-radius: 2em;
-webkit-border-bottom-left-radius: 2em;
-moz-border-radius-bottomleft: 2em;
border-bottom-left-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
background: #007bb6; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004677', endColorstr='#007bb6'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#004677), to(#007bb6)); /* for webkit browsers */
background: -moz-linear-gradient(top, #004677, #007bb6); /* for firefox 3.6+ */
background: -o-linear-gradient(top, #004677, #007bb6); /* for Opera */
background: linear-gradient(top, #004677, #007bb6);
/* border: solid 1px #6d6d6d; */
height: 38px;
display: block;
float: right;
width: 750px;
margin-top: 15px;
}
我也看不出它是否使用px或em的模式,或者元素是否将其与渐变或框阴影结合使用。有人有类似的吗?
谢谢
尝试不使用DirectX渐变,它之前覆盖了我的圆角
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004677', endColorstr='#007bb6'); /* for IE */
将你的。nav类的内边距改为10px,看看是否仍然会发生
这绝对是线性梯度过滤器导致的问题。一个很好的解决方法是使用Modernizr进行特征检测,然后通过类(如
)提供不同的目标规则。.cssgradients {
..use the linear-gradient rules
}
.no-cssgradients {
.. another rule, not using the ie filter
}
在.no- gradients声明中,您可以提供一个背景图像,或者更酷的是,一个data-uri来减少http请求,例如
background-image: url(data:image/png;base64,iVBORw0KGgoA....);
你可以使用一个在线工具来翻译你的背景图片,比如这个
我已经使用这种技术成功地将线性渐变和圆角与添加CSS3 PIE的旧ie浏览器结合起来,如果没有CSS3 PIE,则尝试用过滤器替换线性渐变。