Inline html style fine in Firefox, not working in IE
This is interesting. The attached very simple code gives nice 'background highlighted' text in Firefox, but displays no highlighting in IE7 (and possibly others, not yet tested).
The use of such inline elements is important because I'm using them in a grid to highlight important words etc.
Test.html
&l开发者_Go百科t;html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="Test.css" type="text/css" />
</head>
<body>
This is <hlr>a test</hlr> of the <hlr>highlighting</hlr>
</body>
</html>
Test.css
/*RED Highlighted text.*/
hlr
{
background-color: #FF5555;
font-weight: bold;
font-size:100%;
}
Bizarre! Any thoughts on how to remedy it?
There is no hlr element in HTML. Internet Explorer doesn't make elements it doesn't recognise available to it's CSS selector engine.
The solution is to write HTML, don't make up your own elements. You should probably be using <em> or <strong> instead, possibly with a class to distinguish them from other forms of emphasis.
You can also force new elements to be recognised by the selector engine with document.createElement('element_name'), but adding a JS dependancy isn't a great idea and doesn't resolve the issue that no browser will know what semantics to apply.
hlr is invalid markup. Try this instead:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="Test.css" type="text/css" />
</head>
<body>
This is <span class='hlr'>a test</span> of the <span class='hlr'>highlighting</span>
</body>
</html>
then:
/*RED Highlighted text.*/
.hlr
{
background-color: #FF5555;
font-weight: bold;
font-size:100%;
}
You need to specify the below XHTML doctype too..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
加载中,请稍侯......
精彩评论