0

CSSの質問があります。Web ページに順序付けられていないリストがあります。Google Chrome では、すべてが正しく表示されているように見えます。ただし、IE では、リストに余分な箇条書きが表示されます。

IE 問題の例

Chrome の例の動作

これはCSSです:

#home-blocks-area { padding: 20px 20px 0 20px; min-height:100px; overflow:hidden; clear:both; }
/**********************************************************************************/



/* Example overrides */

.home-block-area { width: 290px; float:left; padding:0 10px; }

.home-block-area.first { padding-left:0; }

.home-block-area.last { padding-right:0;  }

#home-blocks-area .region-home-area-3-b .block { background:none; margin: -6px 0 0; }

#home-blocks-area .block { background:url(images/home-block-box-bg-white.png) repeat-x top; padding-bottom:20px;  }

#home-blocks-area .block h2 { height: 36px; font-size:20px; font-weight:bold; color:#333333; margin:0; padding:10px 0 0 20px; }

#home-blocks-area .region-home-area-1 .block h2 {  padding:10px 0 0 60px; }

#home-blocks-area .region-home-area-2 .block h2 {  padding :10px 0 0 60px; }

#home-blocks-area .region-home-area-3 .block h2
{
    padding: 10px 0 0 30px;
} 

#home-blocks-area .block .content 
{
     background:url(images/home-block-box-bg-white.png); 
     padding:20px; display:block; overflow:hidden;  
     font-family:  Arial, Helvetica, Sans Serif; 
     font-size: 14px; 
     color: #000000;
 } 

 #home-blocks-area .block .content h1, 
 #home-blocks-area .block .content h2, 
 #home-blocks-area .block .content h3, 
 #home-blocks-area .block .content h4 { color:#ffffff; }

 #home-blocks-area .block .content h3 { font-size:17px; }

 #home-blocks-area .block .content .detail h3 { font-size:14px; padding:0; margin:0; }
 #home-blocks-area .block .content .detail h4 { color: #6a7796; font-size: 14px; line-height: 16px; padding:0; margin:0; font-weight:normal; }

 #home-blocks-area .block .content p.post-note{  font-size: 12px; margin-top: -10px; }

 #home-blocks-area .block .content p.post-note a{ color: #3f9fcf; }  

ul.inline li.node-readmore, ul.inline li.comment-add { background: #11719F; border: none; color: #FFFFFF; float: right; font-weight: bold; margin: 10px 0 0 10px;  cursor:pointer; 
font-family: Arial, Verdana, Helvetica, sans-serif; padding:10px; }    

ul.menu { margin: 0 0 0.75em; padding: 0;  }

ul.menu li { margin: 0 0 0.25em 1.5em; padding: 0; } 

.links { clear:both; overflow:hidden; margin:10px 0; }

ul li.leaf { list-style-type: disc; list-style-image:none; 

ul.inline li.node-readmore, ul.inline li.comment-add { background: #11719F; border: none;    color:  #FFFFFF; float: right; font-weight: bold; margin: 10px 0 0 10px;  cursor:pointer; 
font-family: Arial, Verdana, Helvetica, sans-serif; padding:10px; }

.clearfix:after { content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

ここにdivがあります:

<div id="home-blocks-area" class="clearfix">

    <div class="home-block-area first">
        <?php print render($page['home_area_1']);?>         
    </div>
</div>

ソースコード:

<div id="home-blocks-area" class="clearfix">  
    <div class="home-block-area first">
          <div class="region region-home-area-1">
<div id="block-menu-menu-quick-links" class="block block-menu">
<h2>Quick Links</h2>
<div class="content">
<ul class="menu"><li class="first leaf"><a href="/academic-catalog">Academic Catalog</a></li>
<li class="leaf"><a href="/academic-programs">Academic Programs</a></li>
<li class="leaf"><a href="/accreditations-and-affiliations">Accreditations and   Affiliations</a></li>
<li class="leaf"><a href="https://my.state.edu/ics/Admissions/">Admissions</a></li>
<li class="leaf"><a href="https://my.state.edu/ics/Portal_Homepage.jnz?portlet=Events_Calendar">Calendar</a></li>
<li class="leaf"><a href="https://my.state.edu/ics/Inclement_Weather.jnz">Closings and Cancellations</a></li>
<li class="leaf"><a href="/contact-us">Contact Us</a></li>
<li class="leaf"><a href="https://my.state.edu/ICS/Academics/Academic_Information.jnz?portlet=Course_Schedules&amp;screen=Advanced+Course+Search&amp;screenType=next">Course Schedule</a></li>
<li class="leaf"><a href="/employee-directory">Directory</a></li>
<li class="leaf"><a href="/state-col">Employment Opportunities</a></li>
<li class="collapsed"><a href="/giving">Giving</a></li>
 <li class="leaf"><a href="/locations">Locations</a></li>
<li class="last leaf"><a href="https://my.state.edu/ics/">My Z-Online</a></li>
</ul></div>
</div>  </div>      
       </div>
4

1 に答える 1