Question

我想为不同的浏览器使用不同的CSS。

例如： -

我希望Chrome中的宽度为25.5%，IE中的宽度为24.4%。那我应该怎么做

这是我的HTML： -

<tr>
                <td id="flattdhist" runat="server" class="label" style="width: 25.5%; font-size: 120%;
                    font-family: Courier New; float:left;">
                    Flat status history
                </td>
            </tr>

目前它适用于CHROME，但在IE它稍微受到干扰。我该怎么办

Answer 1

如果您需要定位特定的IE版本，您可能需要创建单独的样式表并为每个样式表使用条件注释。

angular.module('myApp').directive('popover', function () {
    return function(scope,elem,attrs) {
        var text, title, label ;
        if (elem[0].tagName == "BUTTON") {
            text = attrs.popover;
            if (attrs.popoverTitle) {
                title = attrs.popoverTitle;
                attrs.$set('ariaLabel', title);
            } else {
                attrs.$set('ariaLabel', text);
            };
            console.log(elem[0]);
        };
        if (elem[0].tagName == "DIV") {
            label = "";
            if (attrs.popoverTitle) {
                label = attrs.popoverTitle;
            } else {
                label = attrs.popover;
            }
            var button = elem.find("button");
            button.attr('aria-label', label);
            console.log(button[0]);
        };
    };
});

请参阅：https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

Answer 2

Microsoft不再通过CSS支持检测IE 11。最好检测一下您需要的功能是否可用。

例如，您可以检测浏览器是否可以呈现HTML5视频：

if(!!document.createElement('video').canPlayType === true) {
// run some code that relies on HTML5 video
} else {
// do something else
}

以下是一些参考链接：

How do I detect the user’s browser and apply a specific CSS file?

https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way

Answer 3

根据我所知，纯css解决方案是不可用的，但是如果你想使用js你可以做到

var curBrowser = navigator.userAgent.toLowerCase();
    if(curBrowser.indexOf('chrome') > 0)
         document.getElementByID("eleID").style.width = "25.5%";
    else if(curBrowser.indexOf('edge') > 0)
         document.getElementByID("eleID").style.width = "24.5%";
    else
         document.getElementByID("eleID").style.width = "23.5%";

这样的事情应该是可能的。

如何应用css逻辑

3 个答案: