When develop a website, you should take care of anything that IE can throw at you without the use of hacks. Hacks are dangerous, since they are based on non-standard exploits and you can’t trust how they’re going to behave on the future browsers. Thus the solution for this problem is the conditional stylesheet or conditional comment. One important thing is that IE 10 and up don’t support conditional comment
Conditional comment operators
||represents Internet Explorer; if a number value is also
specified, it represents a version vector
||less than operator
||less than or equal to
||greater than or equal to
||the NOT operator
||the AND operator
||the OR operator
||evaluates to true
||evaluates to false
Target everything except IE
<link rel="stylesheet" type="text/css" href="not-ie.css" />
Target IE7 only
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
Target IE8 and lower
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
Many developers was wondering about the following line
What does the “double slashes” do or is this line of code correct?
It’s a relative URL without a scheme(http or https) according to RFC 3986: “Uniform Resource Identifier (URI): Generic Syntax”, Section 4.2. It’s useful when switching between http and https, because you won’t need to explicitly specify the scheme. It’s also supported in all web browsers.
More detailed, the two forward slashes are described as a common shorthand for whatever protocol being used
In this tutorial, we’ll use css3 to make a rounded corner for images. As described, css3 supports for IE9+, Chrome, FireFox, Safari and other browsers. You can check your browser support here.
Another problem is that border-radius property doesn’t work properly with images. It only works with div, span and other Html elements. Try this code:
border: 4px solid #fff;
We observe that by giving the border-radius property to the <img> tag the borders get rounded, but the image does not. The image flows out of the border.
To solve the above problem,
- Wrap the <img> element with a div tag which should be having the same dimensions (height and weight) as the <img> tag.
- To this wrapping div tag, specify the same original image as the background image.
- To the original image <img> tag, give the property “opacity: 0“.
Simply add the following html markup:
<img src="images/test.jpg" alt="testing" />
width: 550px; /* Width same as the image width */
height: 350px; /* Height same as image height */
background: url("images/test.jpg") no-repeat 0 0; /* Background Image same as the Original image being wrapped by the div tag */
border: 4px solid #fff;
opacity: 0; /* Hide the original image being wrapped by the div tag */
Refresh your page and check it out.