Question

我的CSS遇到了一个奇怪的问题。代码涉及以矩形形状格式化的标签，并且在悬停时，这些形状从具有绿色背景的白色文本变为具有白色背景的绿色文本。我之前使用CSS过渡来做这种动画（并且它也在IE中工作过），所以我完全不知道它为什么现在不能正常工作。它在Chrome和Firefox中完美运行，但在IE中却什么都不做;它甚至不会改变颜色。

这是我的CSS：

        #wrapper {
            width: 70%;
            margin-top: -1%;
            margin-left: auto;
            margin-right: auto;
            min-width: 950px;
            text-align: center;
        }
        #header {
            padding: 10px;
            text-align: center;
            -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5);
            -moz-box-shadow:    0px 3px 2px 0px rgba(50, 50, 50, 0.5);
            box-shadow:         0px 3px 2px 0px rgba(50, 50, 50, 0.5);
        }
        #header img {
            max-width: 100%;
        }

        a {
            float: left;
            position: relative;
            display: inline-block;
            margin-top: 2%;
            margin-right: 1.5%;
            width: 32.3%;
            padding-top: 5%;
            padding-bottom: 5%;
            background-color: #259b24;
            opacity: 0.8;
            -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5);
            -moz-box-shadow:    0px 3px 2px 0px rgba(50, 50, 50, 0.5);
            box-shadow:         0px 3px 2px 0px rgba(50, 50, 50, 0.5);              
            text-align: center;
            text-decoration: none;
            color: white;
            letter-spacing: 6px;
            text-transform: uppercase;
            font-weight: normal;
            -o-transition: background-color .2s, color .2s;
            -webkit-transition: background-color .2s, color .2s;
            -ms-transition: background-color .2s, color .2s;
            transition: background-color .2s, color .2s;
            font-size: 20px;
        }   
        a:hover {
            background-color: #FFFFFF;
            color: #259b24;
        }
        #right1, #right2 {
            margin-right: 0;
        }
        a::first-line {
            letter-spacing: 6px;
            font-size: 40px;
        }

这是我的HTML：

    <body>
    <div id="wrapper">
        <div id="header">
            <img src="logo.png" />
        </div>
        <a href="google.com" id="left1">General<br />Dermatology</a> 
        <a href="google.com" id="middle1">About Us<br />&nbsp;</a> 
        <a href="google.com" id="right1">Cosmetic<br />Dermatology</a> 
        <a href="google.com" id="left2">Patient<br />Resources</a> 
        <a href="google.com" id="middle2">News<br />&nbsp;</a> 
        <a href="google.com" id="right2">Live Chat<br />Contact Us</a> 
    </div>
</body>

非常感谢任何帮助。谢谢！

Answer 1

问题是浮动和显示：你的锚元素上的内联块属性。从v9开始，转换在IE上工作。但是如果你遇到CSS3这样的问题，特别是在IE中，当这本书说它应该有效时，我经常发现它将它们与某些其他属性结合起来是罪魁祸首。在这种情况下浮动总是有点冒险，而内联块属性是另一个值得关注的属性。

在这种情况下，如果你从他们的{...} CSS中取出它们，过渡工作正常（但当然，你的布局被吹出水面）。我在这里把它放进一个小提琴：jsfiddle.net/pyz6z9fk/我正在使用IE11。

所以它看起来好像你需要以其他方式实现你的布局，或者直到（可能！）某些未来版本的IE过渡。如何将此显示放入CSS表格以使您的布局正常工作？

Answer 2

http://www.w3schools.com/cssref/css3_pr_transform.asp

尝试添加-ms-transform：？

CSS Transitions在IE中工作，只要它的9+，这个网站是浏览器支持信息的好资源：

http://caniuse.com/#search=transform

CSS转换在IE中不起作用

2 个答案: