相关疑难解决方法(0)

当容器有时,我的容器内容不应该被切断border-radius吗？

示例HTML和CSS:

<div class="progressbar">
    <div class="buffer"></div>
</div>

.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }

正如你所看到我border-radius在container(.progressbar)上使用的那样,但是content(.buffer)在容器之外.我在Google Chrome上看到了这一点.

这是预期的行为吗？

PS这不是关于如何解决它,这是关于它是否应该像这样工作.

我在IE9中遇到了一个奇怪的事情,想要显示背景渐变.

基本上我正在将多个类应用于容器对象.

<div class="gradient corners"></div>

使用这个CSS.

.gradient {
background-color: #96A7C5;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, #6C86AD),
color-stop(0.6, #96A7C5)
);
background-image: -moz-linear-gradient(
center bottom,
#75A33A 19%,
#8DC447 60%
);

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

为了获得IE中的渐变,我将过滤器垃圾应用于我的.gradient类.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');

有了它,渐变起作用,但我的圆角消失了.

所以我尝试为过滤器声明设置条件.

<!--[if IE]>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');
<![endif]-->

这带回了我的角落,但渐变消失了.

我遇到了一个问题,一个带有圆角的外部div的边框被一个带有CSS3渐变的内部元素切断.这是CSS3的一个错误 - 如果是这样,我会很高兴地提交错误报告.

如果没有,我该如何解决这个问题？

来源和演示:http: //jsfiddle.net/joshuamcginnis/2aJ8X/

截图:

我曾经filter: progid:DXImageTransform.Microsoft.gradient为IE <9获得渐变.现在,当与阴影或下面的不同背景相结合时,我会让盒子伸出来.

有没有办法保持向后兼容性,没有条件和外部样式表？

看代码:

.class {
    float:left; 
    border:solid 1px #AAA; 
    position:absolute; 
    z-index:1; 
    text-align:left; 
    width:350px; 
    margin: 12px 0px 0px 0px; 
    background:#FFFFFF; 
    border-radius:5px; 
    box-shadow:5px 5px 5px #BBBBBB; 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#FFFFFF); 
}

<div class="class">this</div>

我创建了一个圆角按钮,在IE9中渐变背景不是圆角的:

这是CSS:

.search button {
    padding: 10px;
    font-family: "OpenSansSemibold", "Helvetica", Arial, sans-serif;
    font-size: 16px;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

我怎样才能解决这个问题？

我想知道是否有任何解决方案使用javascript或其他什么来让IE显示边框半径或渐变背景？