Ticket #4662: zoom.html
File zoom.html, 3.7 KB (added by smiller.health, July 09, 2009 09:44PM UTC)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en-us" lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Offset Zoom Test Case</title>
    <style type="text/css">
        .ProblemDescription
        {
            font-size:12pt;
            font-weight:bold;
            color:#CC0000;
            width:400px;

        }
        
        #accordion
        {
            width:400px;
            margin-top:20px;
            margin-bottom:20px;
            font-size:10pt;
        }
        
        .ProblemArea
        {
            background-color:#FFFF00;
        }
        
    </style>
    
	<link type="text/css" href="ui.theme.css" rel="stylesheet" />
	<link type="text/css" href="demos.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
    
    <script type="text/javascript"><!--
        $(function() {
            $("#accordion").accordion();
        });

        
    --></script>

</head>
<body>
    <div class="ProblemDescription">
        In IE 6, 7 or 8 notice that any anchor link text in the accordion that spans multiple lines has unusual breaks before and after the link.  
        </div>

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
		<span class="ProblemArea">There will be an unexpected text break before</span> <a href="javascript:void(0);">ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in <span class="ProblemArea">... as well as after the link</span></a>. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, <a href="javascript:void(0);" class="ProblemArea">dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo</a>. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. <a href="javascript:void(0);" class="ProblemArea">Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper</a>. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada <a href="javascript:void(0);" class="ProblemArea">fames ac turpis egestas. Vestibulum ante ipsum primis in
		faucibus orci luctus et ultrices posuere cubilia Curae</a>; Aenean lacinia
		mauris vel est.
		</p>
		<p>
		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos himenaeos.
		</p>
	</div>
</div>
    <div class="ProblemDescription">
        I have traced it down to a single call inside the accordion widget's _init function that adds "zoom:1" styling to all anchor elements in IE:
        </div>
        <pre>
// IE7-/Win - Extra vertical space in lists fixed
if ($.browser.msie) {
	this.element.find('a').css('zoom', '1');
}
        </pre>
    <div class="ProblemDescription">
        When this code is removed, this is no longer a problem.
        </div>

    
</body>
</html>

Download in other formats:

Original Format