css-hack | 易学教程

What does the smiley face “:)” mean in CSS?

阅读更多关于 What does the smiley face “:)” mean in CSS?

I spotted this CSS code in a project: html, body { :)width: 640px;} I have been around with CSS for a long time now but I never saw this ":)" code before. Does it mean anything or is it just a typo? From an article at javascriptkit.com , that's applied for IE 7 and earlier versions: if you add a non-alphanumeric character such as an asterisk ( * ) immediately before a property name, the property will be applied in IE and not in other browsers. Also there's a hack for <= IE 8 : div { color: blue; /* All browsers */ color: purple\9; /* IE8 and earlier */ *color: pink; /* IE7 and earlier */ }

radio button (checkbox hack)

阅读更多关于 radio button (checkbox hack)

I'm trying to use the CSS radio button hack to reveal a hidden div, but I cannot get it to appear when clicked. With the current code below it is hidden, and nothing happens when I click the check box. I intend to add similar boxes (and later hide them) to display a few tabs of light content. Can someone please offer some aid? Here is the html (only the first box is written): <section class="panel clearfix skillsBox"> <div class="wizard wizard-vertical clearfix" id="wizard-2"> <ul class="steps"> <li class="step changeSkill"> <input type="radio" id="zskills"><label for="zskills"><span class=

Is there any way to apply CSS for specific chrome version?

阅读更多关于 Is there any way to apply CSS for specific chrome version?

I'm facing a problem in Chrome 59 version alone . to sort that I need a css hack to target that chrome version alone. I saw an article with this example code says its working, but in my case it doesn't work. example 1 @media screen and (-webkit-min-device-pixel-ratio:0) { .logotext-n { .chrome59.margin-left: -10px; /* update for Chrome 59 issue */ } } example 2 @media screen and (-webkit-min-device-pixel-ratio:0) { .chrome59.logotext-n { margin-left: -10px; /* update for Chrome 59 issue */ } } both the examples doesn't work. You should in principle always design for feature detection, not

The drag doesn't work when it has a siblings img in IE

阅读更多关于 The drag doesn't work when it has a siblings img in IE

I'm trying to make a drag box with a sibling img and the 'move-obj' can be dragged.It runs correctly in other browser but IE(8,9,10). In IE, just while you hover the border can you drag the 'move-obj', but if you remove the tag 'img' it work correctly.I found that if I add a background-color to the 'move-obj',it will run correctly too, but it isn't what I want. Can somebody give me some advice?Here is the codepen <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ position: relative; width: 100%; height: 100%; background-color: #f0f0f0; padding

Acceptable CSS hacks/fixes

阅读更多关于 Acceptable CSS hacks/fixes

Is there a list of 'good' clean CSS hacks, which are certain to be future-proof? For example, zoom:1 is safe, as long as it's only served to IE, and you remember it's there. The very common hack of using child selectors is not safe because IE7 supports them. Using height:1% just feels dirty (but that might just be me). I know of ie7-js , so IE6 bugs don't worry me much. Also, I'm not looking for a religious debate, just sources. Thanks for the replies - I've selected the one with best sources as answer. Thanks also for the suggestions to use separate CSS files, or not to worry about it. I

Target IE9 or IE8 but not both using CSS

阅读更多关于 Target IE9 or IE8 but not both using CSS

I know it shouldn't be done, but I just want a quick fix for now and that will give me time to find a proper fix for this. How can I target IE8 alone using CSS because I've tried appending \9 such as: margin:100px\9; However, it also affects IE9 and I don't want that because on IE9 the whole site looks fine. From the HTML5 Boilerplate and originally from Paul Irish : Change your <html> tag to this:    <!--[if IE 9 ]> <html

What is better: CSS hacks or browser detection?

阅读更多关于 What is better: CSS hacks or browser detection?

Commonly when I look around the Internet, I find that people are generally using CSS hacks to make their website look the same in all browsers. Personally, I have found this to be quite time consuming to find all of these hacks and test them; each change you make you have to test in 4+ browsers to make sure it didn't break anything else. About a year ago, I looked around the Internet for what other major sites are using (Yahoo, Google, BBC, etc) and found that most of them are doing some form of browser detection (JS, HTML if statements, server based). I have started doing this as well. On

Conditional CSS rule targeting Firefox Quantum

阅读更多关于 Conditional CSS rule targeting Firefox Quantum

We are having issues targeting Firefox Quantum when it comes to CSS. We know that the following: @-moz-document url-prefix() { .my-style{ } } ...will target all Firefox browsers, but we just want to target Firefox Quantum, since there are some differences between Firefox Quantum and older versions of Firefox when it comes to CSS interpretation. Does anyone know how to do that? Perusing the release notes for Fx Quantum 57, specifically Quantum CSS notes , a number of differences between Gecko and Stylo are listed, and a few hacks come to mind. Here's one: In Quantum CSS, calc() is supported

Make CSS apply only for Opera 11?

阅读更多关于 Make CSS apply only for Opera 11?

Is there a way to make some CSS rules apply only for Opera (11)? I love challenges! It took me some time but I finally found it: body {background:0} /* default */ @media not screen and (1) { body {background:red} /* OP 11 */ } @media not screen and (orientation) { body {background:green} /* for the earlier versions of Opera that pick the first media query's rule + chrome/safari */ } browsers tested: red: Opera 11 green: Opera 10 and 10.5 + WebKit browsers none: Opera 9.26 + Firefox 3.6 + IE9 It's related to the error-handling and also the fact that NOT negates the global result (WebKit

IE8 CSS Hack - best method?

阅读更多关于 IE8 CSS Hack - best method?

Can anyone recommend the best way to hack IE8 styling via CSS, I've recently been making IE8 render as IE7 for ease - but wondered if it was best to add IE8 hacks? You should reverse your method. First your site should look good in modern browsers (like Firefox, Chrome, Opera, IE 9), and then you can start worrying about the others. As others suggested, conditional comments can be your friend. First, you should develop your CSS to look fine in the modern browsers. Then check IE8, see what problems you get. If you need to, include an IE-specific stylesheet. After that, you can check in IE7 and