Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > CSS that works for specific browsers: IE Chrome Firefox CSS Hack_html/css_WEB-ITnose

CSS that works for specific browsers: IE Chrome Firefox CSS Hack_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:54:19
Original
1100 people have browsed it

CSSHack for Firefox


A CSS Hack that is only applied on Firefox. Although this is very rare, you may encounter it sometimes: 

@-moz-document url-prefix() { .cssSelector {  font-size: 14px; }}
Copy after login

CSSHack for Chrome


A CSS Hack that is only applied on Chrome. This situation has not been encountered yet (the reason for using Chrome as a development browser?), Be prepared. 

@media screen and (-webkit-min-device-pixel-ratio:0) {    #test1{color:red;}}
Copy after login

CSS Hack for IE6/7/8/9

A CSS Hack that is only applied on IE. This situation is encountered almost often. A common one is used here. Method, the situation is complicated, you need to divide the version first:

Attach an IE version of class to the body

Write Hack CSS together with other CSS files.

IE9 does not add Hack; IE6, IE7, IE8 add the prefix of ie, IE6 adds an additional prefix of ie6 Hack (most hacks written for ie7/8 will be used by IE6) 

<!--[if lt IE 7 ]><body class="ie ie6"><![endif]--><!--[if IE 7]><body class="ie"><![endif]--><!--[if IE 8]><body class="ie"><![endif]-->
Copy after login

Attach a new CSS file to IE

Add one more for IE7/8 and two more for IE6. Just let IE decorate more things and don’t pollute other CSS files

<!--[if lt IE 9]><link type="text/css" rel="stylesheet" href="css/show_ie.css"><![endif]--><!--[if lt IE 7]><link type="text/css" rel="stylesheet" href="css/show_ie6.css"><![endif]-->
Copy after login



Note* lt means less than; that is, "ifless than IE9" = "if lt IE 9", there are several others, but they are less used

  • gt: greater than
  • lte: less than or equal to

    • Related labels：
    针对特定浏览器起作用的CSS: IE Chrome Firefox CSS Hack
    source：php.cn
    Previous article：Use css3 to achieve windmill effect_html/css_WEB-ITnose Next article：How does frameset realize the jump of the entire page_html/css_WEB-ITnose
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
    From 2024-04-29 11:01:01
    0
    3
    2205
    How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
    From 2024-04-23 00:22:19
    0
    11
    2354
    The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
    From 2024-04-19 15:37:47
    0
    1
    1972
    There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
    From 2024-04-18 23:52:34
    0
    1
    1857
    Where is the courseware about CSS mind mapping? Courseware
    From 2024-04-16 10:10:18
    0
    0
    1921
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template