我在使用 IE9 时遇到了一些问题,只是想不通,我在 CSS 中创建了一个线性渐变的按钮,它在 Chorme、Firefox 和 Safari 中显示完美,但在 IE9 中显示不佳
http://ubizzo.co.uk/img/ie9.png
http://ubizzo.co.uk/img/ch-fi-sa.png
第一个图像链接是 IE9,第二个图像链接是所有其他浏览器,我让它工作的唯一方法是如果我在 css 中添加 float:left 或 float:right 如下所示,但这显然会破坏布局,我试过使用 float:none 但这也不起作用,我在一个空白的 html 文件中试过这个只是为了排除任何冲突的 css 但仍然不起作用:-s
.purchase {
margin-top: 5px;
display: block;
width: auto;
}
.purchase a {
margin-top: 10px;
margin-bottom: 10px;
padding: 5px 10px;
cursor: pointer;
border: none;
color: #fff;
line-height: 1em;
width: auto;
**float: left;**
border-image: initial;
text-align: center;
border: solid 1px #189199;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: -moz-linear-gradient(top, #19d7e3, #12A4B3);
background: -webkit-gradient(linear, left top, left bottom, from(#19d7e3), to(#12A4B3));
background: -moz-linear-gradient(top, #19d7e3, #12A4B3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#19d7e3', endColorstr='#12A4B3');
}
.purchase a:hover {
background: -moz-linear-gradient(top, #12A4B3, #19d7e3);
background: -webkit-gradient(linear, left top, left bottom, from(#12A4B3), to(#19d7e3));
background: -moz-linear-gradient(top, #12A4B3, #19d7e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#12A4B3', endColorstr='#19d7e3');
color: #ffffff;
}
感谢您的帮助, 亚当。
http://jsfiddle.net/gdmP8/ - 请注意,该按钮仅在您添加 float:left/right 后显示
最佳答案
应用此 css 可以在我检查过的所有浏览器中使用 chrome、Firefox、safari、opera、ie-7、ie-8、ie-9
background: #12a4b3; /* Old browsers */
background: -moz-linear-gradient(top, #12a4b3 0%, #19d7e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12a4b3), color-stop(100%,#19d7e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* IE10+ */
background: linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12a4b3', endColorstr='#19d7e3',GradientType=0 ); /* IE6-9 */
关于css - IE9 css 问题,强制使用 float :left/float:right,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11012180/