IE9 css 问题，强制使用 float:left / float:right答案

【问题标题】：IE9 css issue, forced to use float:left / float:rightIE9 css 问题，强制使用 float:left / float:right
【发布时间】：2012-06-16 06:02:06
【问题描述】：

我在使用 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 后才会显示

【问题讨论】：

可以添加相关的HTML吗？你能做一个jsfiddle.net 的问题演示吗？
尝试放入 'position:relative;'而不是“浮动”。
您的问题仍然显示为未回答我已经看到有有效的工作答案请批准答案谢谢。

标签： css internet-explorer-9 css-float

【解决方案1】：

应用此 css thi 将适用于我检查过的所有浏览器 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 Guy，感谢您的回复，虽然此方法确实在 IE9 中显示按钮，但它不会仅应用纯色渐变 - 背景：#12a4b3； /* 旧浏览器 */
我已经在所有浏览器中检查了相同的代码，它工作正常，请您分享 jsfiddle 链接，以便我更好地理解..
jsfiddle.net/rizwanabbasi/GcYPy 检查这个我已经改变了只是链接立即购买

【解决方案2】：

你在 Opera 中也会遇到同样的问题，你为什么不坚持一个简单的 IE 按钮图像翻转？

【讨论】：

【解决方案3】：

IE 9 中的浮动问题通常是由错误的标题引起的。检查这个：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

取自IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly （不确定是否重复）

您可能应该使用现在的标准 linear-gradient（或至少 -ms-linear-gradient 和 -o-linear-gradient 而不是只使用 moz 和 webkit 特定的渐变）。

【讨论】：