Question

道歉，我不是css家伙，但仍在寻找小恩惠。请看下面的css

其中我为所有浏览器指定margin top 60px，并为不同的IE版本指定相同的-60px。我想对IE10和＆amp; 11但我对css的知识有限。所以任何人请帮助我需要添加到适用于IE10和11的.arrange_collection_today。请指导。感谢

.arrange_collection_today
{
    margin-top: 60px;

    _margin-top:-60px; /* Only works in IE6 */
    *margin-top:-60px; /* IE6, IE7 */
    +margin-top:-60px;/* Only works in IE7*/
    *+margin-top:-60px; /* Only works in IE7 */
    margin-top:-60px\9; /* IE6, IE7, IE8, IE9 */
    margin-top:-60px\0; /* IE8, IE9 */
    margin-top:-60px\9\0;/*Only works in IE9*/                        
}

Answer 1

更新了IE10和IE 11的类

.arrange_collection_today
{
    _margin-top:-60px; /* Only works in IE6 */
    *margin-top:-60px; /* IE6, IE7 */
    +margin-top:-60px;/* Only works in IE7*/
    *+margin-top:-60px; /* Only works in IE7 */
    margin-top:-60px\9; /* IE6, IE7, IE8, IE9 */
    margin-top:-60px\0; /* IE8, IE9 */
    margin-top:-60px\9\0;/*Only works in IE9*/                        
}

. ie10 .arrange_collection_today { margin-top:-60px; } /* Only works in IE10 */ 

*::-ms-backdrop, .arrange_collection_today { margin-top:-60px } /* IE11 */

Answer 2

我已经放弃了CSS黑客攻击，因为它们难以维护，并可能导致其他/未来浏览器出现意外行为。相反，我正在使用一个JavaScript类解决方案，为HTML元素添加一个类名。

(function() {
    var ua = navigator.userAgent;

    function addClass(className) {
        // jQuery:
        $('html').addClass(className);
        // Or plain JS:
        // document.documentElement.className += ' ' + className;
    }

    // This block is the part you want.
    // I don't add versions for gecko or webkit because they release a new version very often.
    if ((/msie/gi).test(ua)) { addClass('ie' + document.documentMode); }
    if ((/gecko\//gi).test(ua)) { addClass('gecko'); }
    if ((/webkit/gi).test(ua)) { addClass('webkit'); }

    // Platform.
    if ((/macintosh/gi).test(ua)) { addClass('mac'); }
    if ((/windows/gi).test(ua)) { addClass('win'); }
    if ((/linux/gi).test(ua)) { addClass('lin'); }

    // Detect browsers with touch capabilities.
    // I'm using it to show or hide instructions.
    if ('ontouchstart' in document.documentElement) {
        addClass('touch-enabled');
    }
})();

我可以这样做：

.ie9 .arrange_collection_today {
    color: blue;
}

.ie10 .arrange_collection_today {
    color: red;
}

如何添加适用于IE 10＆amp; 11

2 个答案: