皇族电竞竞猜

sx-science.cn - Web Design Tutorials, Tips, Top Resources

CSS - Cascading Style Sheets

Solutions to CSS Browser Bugs and Cross-Browser, Cross-Platform CSS Issues

Frustrated by CSS browser bugs, aka CSS Bugs! 皇族电竞竞猜 Browser bugs with CSS can be an incredible source of frustration for Web designers and developers. The Solutions to CSS-Related Browser Bugs, CSS Bug Fixes, and Cross-Browser, Cross-Platform Issues section below includes links to articles, tutorials, and resources to help you find CSS bug fixes (solutions to CSS bugs and browser rendering differences), CSS workarounds, hacks, and how to create cross-browser, cross-platform CSS - Cascading Style Sheets. Especially popular are IE7 CSS hacks and bug fixes, which are also included below, along with IE8 CSS bug fixes and more. All or nearly all CSS bug fixes, solutions listed below will still validate to W3C Recommendations, and if they don't, they'll say so with a warning at the particular Web site.

Books on CSS
Recommended by sx-science.cn

See more CSS books, read reviews, why we recommend each book

皇族电竞竞猜 In association with

CSS-Related Browser Bugs, Bug Fixes, Solutions, and Workarounds

This section is organized by bugs, solutions, and workarounds bugs, solutions, and workarounds for all browsers first, followed by Internet Explorer Bugs, Solutions, Workarounds (organized by versions), and Netscape 4 Bugs, Solutions, Workarounds.

皇族电竞竞猜For more on cross-browser typography, sizing fonts, image replacement techniques, or font sizing and accessibility:


CSS techniques to help your site work the best cross-browser, cross-platform while avoiding using CSS hacks. Covered: using margin instead of padding on parent elements, letting font-size inherit from the root element, and links to more info. [Via .]

  • Owen Briggs is documenting bugs, cross-browser problems and workarounds, primarily for CSS boxes, but also other layout issues with CSS. Lots for Internet Explorer, especially IEWin 5, IEWin 5.5, IE5 Mac, Netscape 6. Fabulous, helpful resource with lots of documentation, illustrations, links to more helpful information. [Article updated 05/10/2006, by Owen Briggs, .]

  • “occurs when an image is floated left or right, and there isn't enough text to exceed the height of the image ... If the body text and the document byline are each contained in a div element, any floats in the body text div may stick out of the bottom of it and intrude upon the byline div, which doesn't look too good.” Discussion/tutorial, thought process of figuring out a workaround, CSS code, links to other resources, and much more. Covers a cross-browser, cross-platform approach for a multitude of browsers, including IE5 Mac. Discusses clear:both and uses the Holly hack, display:inline-block and display:table for workaround. Also discusses other possibilities depending on your layout needs. Be sure to also read the comments following that, too. [Article/tutorial dated 12/14/2004, by Roger Johansson, .]

  • Fantastic, easy-to-understand explanation with plenty of examples along the way that show how browsers render auto-height and margin-collapsing. He uses a simple example of adding 20-pixel top and bottom margin style rules to a paragraph element and shows how it's rendered in various browsers, why, and what you can do to get the result you want and also help cross-browser consistency - no hacks, and validates to W3C. [Article/tutorial dated 07/28/2004, by Minz Meyer, for .]

  • Check this fabulous resource to find so many questions answered before you ask them again at the newsgroups. Links to many authoritative and helpful resources here, too. Valuable resource. Editor note February 2006: This site was taken over by GreyTower Technologies October 2005 with new volunteers, so info should now be updated before long. [CSS Pointers Group, ]

  • The author's approach: good cross-browser coding is to find the set of standards that are supported and then use them. He writes about how to do exactly that. [Article/tutorial dated 01/13/2006, by Emil Stenström . Hat tip: Laura Carlson, .]

  • Peter-Paul Koch's fascinating tests and results with documentation, screen shots, and more. As of November 2005, information includes CSS2 selectors, declarations, and a compatibility chart for Netscape 4.x and 6, IE 4, 5 and 6, Opera 5, Mozilla 1.75, Safari 1.3, and Opera 8. Continually updated. [by Peter-Paul Koch]

  • Valuable tips and insight about what to pay attention to and follow with your CSS rules. This is a must read for anyone and a helpful reference. [08/19/2005, by Dave Shea, .]

  • A collection of filters and hacks, browser support for each, and helpful info. The chart with all the info is a great help, too. Fabulous resource here! [Filters updated 03/12/2004, by Chris Nott, .]

  • Helpful article that discusses why a select few CSS hacks are actually OK to use and why - PPK's “safe list.” [Article/tutorial dated 08/2004, by Peter-Paul Koch, .]

  • Section at the CSS-discuss Wiki that covers CSS hacks quite thoroughly - with links about good and bad hacks, whether or not to use hacks at all, and links to: hack summaries, listings of hacks and browsers and how they work, and a listing of hacks specifically for Mac browsers. [Via .]

  • If a CSS hack is used at all, it's important to use only what's considered a “good” hack. This article explains the qualities of a good CSS hack and examples. Topics cover: future-proof, valid syntax, doesn't make a style sheet difficult to maintain. [Via .]

  • by Johannes Koch. Excellent coverage with authoritative references and input. Includes @import rule, the media attribute, the 'comment bug,' the attribute selector, the child selector, Tantek's hack, and includes a summary chart for quick reference, too. Great! Editor note November 2005: This one has the now infamous @import trick that's widely implemented and other popular workarounds. Still helpful information despite its last update. [Last updated 2002. By Johannes Koch.]

  • This JavaScript, initially prompted by the cross-browser smaller font sizing issue with Internet Explorer (Windows version), “if applied with care, helps make many sites readable no matter what the text size setting.” Note that this will work for many but not ALL site designs. [Article dated 06/06/2002, by Matt Round via .]

  • Great article about the easy lure of CSS hacks, their inherent dangers, along with discussion of CSS hacks that are reasonable and why. [Article/tutorial dated 11/06/2003, by Peter-Paul Koch, for .]

  • A fantastic Web site devoted to documenting browser bugs with CSS, providing fixes that will validate, and lots of templates and other helpful information. [Section began 2002, continually updated. By 'Big John' Gallant and Holly Bergevin, .]

  • As the topic says, this article via css-discuss Wiki discusses the pros and cons of using CSS hacks with links to articles and further discussion. Well done. [Via .]

  • Great tutorial with lots of helpful techniques and approaches, along with cross-browser support info. “With all the hype over new and upcoming browser support for advanced CSS features, developers can be confused about the CSS they can include in web projects today. Many of the more advanced features aren't widely supported by the dominant browsers, but some very useful ones are — including newer features from CSS3.” [Article/tutorial dated 04/09/2008, by Tim Wright, for .]

  • Great article at the Apple Developer site for creating sites using “best practices.” Covers DOCTYPE, page layout with CSS (with and without using minimal tables for layout), XHTML, what to avoid, accessibility, CSS, JavaScript, and more. Lots of links along the way and at the end of the article. [Article/tutorial by .]

  • Intro covers: Workarounds, Filters, and Hacks Defined; The Problem with Workarounds, Filters, and Hacks; Avoiding Implementation Pitfalls. Sections then include: Internet Explorer Conditional Comments; Workarounds and Filters; CSS Hacks. Excellent reference. “We've worked hard to make this the most detailed and up-to-date reference on the subject available.” [Article/tutorial by Tommy Olsson and Paul O'Brien, for .]
  • top‘On this page’ menu

    Microsoft Internet Explorer CSS Bugs, Bug Fixes, Hacks, Solutions, Workarounds

    Editor note 05 August, 2006, updated 01 December 2006: Although you'll find plenty of approaches to workarounds, hacks, filters, and conditional comments below, conditional comments are currently the recommended way, the “best practice” approach to manage IE's CSS quirks and bugs. What are conditional comments? Here's an example that tells IE to use the content if it's IE6. Other browsers will ignore conditional comments.

    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6hacks.css" />
    <![endif]-->

    The above example will then serve only IE6 with the link to the ie6hacks.css file. Several articles and tutorials below explain in more detail what they are and how to use them. You'll also find plenty of links to CSS bugs, solutions (not just conditional comments!), and workarounds.


    This section of the Position is Everything Web site is devoted to exploring bugs in Internet Explorer 5, 6, 7 and above, and how to solve them. Some of what you'll find there: expanding box problem, Quirky Percentages In IE6's Visual Formatting Model, IE/Win Line-height Bug, IE6 Border Chaos, Disappearing List-Background Bug, Guillotine Bug, Unscrollable Content Bug, IE 6 Duplicate Characters Bug, IE and Italics, Doubled Float-Margin Bug, Duplicate Indent Bug, Three Pixel Text Jog, Escaping Floats Bug, Creeping Text Bug, Missing First Letter Bug, Phantom Box Bug. Highly recommended to help with resolving your Web site's CSS IE bugs! [Section began 2002, continually updated. By 'Big John' Gallant and Holly Bergevin, .]

  • Great article, tutorial on how to figure out IE bugs, including making sure it isn't a bug first, validating. Covers {position: relative;}, the peekaboo bug, dimensional bug fixing, the expanding box trick, the Holly hack, source code, and more. Easy to understand. [Article/tutorial by John Gallant, Holly Bergevin, for .]

  • Clearing CSS floats in Internet Explorer, along with a helpful explanation of IE's expanding box problem and how to work around it. [Article/tutorial updated 10/10/2005 (from 9/10/2002) by artcoder and 'Big John' Gallant, for .]

  • It's another IE bug caused by placing a list with a background set within a floated <div> that has been relatively positioned. Problem and solutions discussed here. [Article dated 07/30/2004, by Matt Smith, for .]

  • Solutions and insight for IE's misinterpretation of the CSS box model, text spilling out of its container in non-IE browsers, disappearing background images, widths only working on IE, unstyled version of a Web page appearing in IE, fixed width Web page not sitting in center of window. [Article/tutorial dated 02/2006, by Trenton Moss, .]

  • Effects Windows IE5.01 and IE5.5, and IE6. “This demo will describe a bug where the line-height is incorrectly rendered if the line contains a replaced element. Very simply, if the default line-height is changed to a larger value, the line spacing above and below any text line that contains a replaced element, such as a small emoticon, will be half of the spacing seen elsewhere in the text.” [Article/tutorial dated 02/05/2005, by Jeroen Mulder, for .]

  • “A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element 'layout.'” This article helps explain what that is, its effects, and possibilities for working with it, along with links to further information. Very helpful! [Article/tutorial regularly updated, by Ingo Chao, .]

  • Helpful information from Microsoft regarding Internet Explorer user agent strings, identification, especially for conditional comments, targeting specific IE versions, identifying the user-agent string for the browser you're currently using, and more. Tables also show IE version tokens, platform tokens, optional components, and more. “This topic describes the user-agent string, which identifies your browser and certain system details to servers hosting the Web sites you visit. The topic also shows how to view your user-agent string, summarizes tokens used by recent versions of Microsoft Internet Explorer, and documents registry keys that effect the user-agent string.” [Article/tutorial via .]

  • by Tapio Markula. Helpful, thorough tutorials and discussions for main browsers to 2004. (IE4, IE5, Netscape 4, Netscape 6, Opera 4.x, 5.x, 5.12) [Article by Tapio Markula, .]
  • top‘On this page’ menu


    Explanation of Microsoft conditional comments to use to target or exclude specific versions of Internet Explorer. Includes code examples, suggestions of how to use them effectively. Direct from Microsoft. [Article/tutorial via .]

  • The basics of conditional comments, with plenty of examples. [Article/tutorial updated 04/06/2007, by Peter-Paul Koch, for .]

  • An easy way to hide, or “cut off” older versions of IE using conditional comments. Shows how to implement negative conditional comments effectively, “less/greater than” operators (gt/gte/lt/lte), tips to watch out for, examples, links to resources, and more. [Article/tutorial dated 12/06/2006, updated 01/05/2007, by Petr Stanicek (aka ), .]

  • Easy-to-implement approach to targeting IE or hiding from IE, too. The article says the combined approach using conditional comments and child selectors works for any version of IE, too. Worth checking out. The article's summary: “The Star-HTML hack was a very elegant way to easily target style rules at IE and apply fixes. Internet Explorer 7 has fixed the Star-HTML hack, taking away the elegance. This article introduces a simple method for targeting CSS rules at IE that uses only one stylesheet and works for all versions of IE. It will require some minimal markup using Internet Explorer's conditional comments and CSS descendant selectors.” [Article/tutorial dated 02/02/2007, by Hiroki Chalfant, for .]
  • top‘On this page’ menu


    [Article/tutorial by .]

  • An entire weblog/blog devoted to news and information about IE8. (not affiliated with Microsoft) [Web site: .]

  • [Article/tutorial dated 03/09/2008, by (Official Microsoft blog).]

  • [Article/tutorial dated 03/09/2008, by (Official Microsoft blog).]

  • “Now, IE8 will show pages requesting 'Standards' mode in IE8's Standards mode. Developers who want their pages shown using IE8's 'IE7 Standards mode' will need to request that explicitly (using the http header/meta tag approach described ).” [Article/tutorial dated 03/03/2008, by (Official Microsoft blog).]

  • [Article/tutorial dated 01/21/2008, by Aaron Gustafson, for .]
  • top‘On this page’ menu

    Microsoft Internet Explorer 7, a.k.a. IE7: IE7 CSS Bugs, Bug Fixes, Hacks

    See also Clearing Floats in IE7 and Internet Explorer 7 Information Direct from Microsoft below.

    Clearing Floats in Microsoft IE7

    See also CSS Tools CSS Reference Charts, Tables for helpful charts, including charts on various methods for clearing floats and which approaches work with each browser.

    New and Popular Books on CSS
    Recommended by sx-science.cn

    Read reviews, why we recommend each book.

    In association with


    Section devoted to CSS compatibility for IE7, part of the section, direct from MSDN Library, Microsoft. [Article/tutorial updated regularly, by Markus Mielke Dave Massy, Microsoft Corporation, for .]

  • List of CSS features and changes for IE7, details on other bugs, extended some existing CSS implementations, added new features from CSS 2.1, provided better standards support, and more. “In all, we made over 200 behavior changes (bug fixes or new features) under strict mode to improve CSS2.1 compliance. All this work (with the exception of transparent PNGs) has been done under the <!DOCTYPE> switch only... ” Bugs fixed include: Peekaboo Bug, Internet Explorer and Expanding Box Problem, Quirky Percentages, Line-height bug, Border Chaos, Disappearing List-Background bug, Guillotine Bug, Unscrollable Content bug, Duplicate Characters Bug, IE and Italics, Doubled Float-Margin bug, Duplicate Indent bug, Three pixel text jog, Creeping Text bug, Missing First letter bug, Phantom box bug. See the post for many more fixed. [Article/tutorial dated 08/22/2006, by Markus Mielke, for .]

  • Post about IE7's CSS compliance and efforts at making IE as standards-compliant as possible, along with links to their CSS bugs site, opinion posts, more. From the personal blog of Chris Wilson, Group Program Manager of the Internet Explorer Platform team at Microsoft. [Article/tutorial dated 08/10/2006, by Chris Wilson, .]

  • After eliminating bugs in IE6, along with parser bugs, the IE7 team sees that CSS IE6 hacks are breaking in IE7. They also provide suggested fixes, including conditional comments, for your CSS to specifically target the IE6 bugs only. [Article/tutorial dated 10/12/2005, by Markus Mielke, for .]

  • This blog post by the IE7 team specifically discusses: Using the root node wild card selector for IE only rules (* HTML) [strict mode only fix], multi-class selectors as defined by CSS 2.1 (such as .floral.pastel) [strict mode only fix], and pseudo-element parsing sometimes flags rules as invalid (such as p:first-letter{ color: red; }) [strict/quirks mode fix]. Helpful links, too. [Article/tutorial dated 09/02/2005, by Justin Rogers, for .]

  • A great listing of the bugs fixed in IE7 right from the source - the developers creating IE7. [Article/tutorial dated 07/29/2005, by Chris Wilson, for .]
  • top‘On this page’ menu

    Microsoft Internet Explorer 6, aka IE6: IE6 CSS Bugs, Bug Fixes, Hacks

    Many IE6 CSS bugs are covered above within Microsoft Internet Explorer: All Versions, Microsoft Internet Explorer: Conditional Comments and Bugs, Solutions, Workarounds for All Browsers皇族电竞竞猜. Below you'll find quite a few tutorials, articles, that focus specifically on IE6.


    Grab a copy of the csshover.htc from the originator's website where you'll also find explanations, information, link resources, and more. “Most modern browsers support the :hover selector for any html element. This is cool, because it enables you to, for instance, apply a mouseover effect to table rows <tr> using only CSS. IE however, with a market share of > 90%, does not natively support :hover on elements other than links <a>, rendering the entire :hover concept useless.” This approach uses IE behaviors within the csshover.htc file to allow IE to implement :hover rules on other elements. [Article/tutorial updated 02/06/2006, by Peter Nederlof, for .]

  • To recreate the :hover for IE for elements other than the anchor element, this tutorial explains and shows how to implement “adding a carefully crafted Jscript file (csshover.htc) to the page via a Microsoft proprietary 'behavior' rule in the CSS file” using a conditional comment for just IE. [Article/tutorial by John Gallant and Holly Bergevin, for .]

  • Information, tutorial about csshover.htc, and also explains an alternative approach using PHP. Comments and discussion also include using ASP, ColdFusion, setting the MIME type on the server, and more. [Article/tutorial dated 05/20/2005, by Aldo, .]

  • Helpful information and code to use to add the correct MIME type to your server for .htc files by using httpd.conf or .htaccess. Links to Microsoft information, too. [Discussion list post dated 04/12/2004, by Brian Ally, via .]

  • How to add the proper MIME-type to your Apache server for .htc files, explanation, references provided. [Article/tutorial dated 04/21/2006, by .]
  • top‘On this page’ menu


    Edge positioning, hiding and linking, floats, form problems, phantom-links, overflow problems, misc. bugs, resources to more. Incredibly helpful site for IE5 Mac CSS issues and solutions. [Web site by .]

    top‘On this page’ menu

    Netscape 4 Bugs, Solutions, Workarounds

    Some still need to cover Netscape 4, so this section remains here, although this old browser is nearing extinction at this point. These links go to sites specifically about Netscape 4 issues. The All Browsers section above has more on Netscape 4, too.

    top‘On this page’ menu

    Cross-Browser, Cross-Platform CSS Typography and Font Issues and Solutions has moved to the CSS Typography page: Cross-Browser, Cross-Platform CSS Typography and Font Issues and Solutions.

    top‘On this page’ menuNavigation belowSearch/Sidebar

    Web Site Resources

    Most Popular Books

    In association with

    Our Other Sites

    皇族电竞竞猜Effective, accessible, standards-based Web site design since 1996

    Weblog on Web design, CSS, standards, music, more. By Shirley Kaiser, SKDesigns.



    Within Articles, Tutorials, Tips:

    Within Web Site Resources:
    SkipShow or Hide Detailed Navigation