Question

我们有很多List（li标签），然后是＆＃39; p＆＃39;标签

<ul>
<li>
   <p>in paragraph</p>
</li>
</ul>

在IE8中，这不是问题。列表图像和文本已对齐。但在IE10中，文本和列表图标未对齐（在兼容性视图中对齐）。

删除这样的＆＃39; p＆＃39;标签是一种解决方案，但我们在许多地方都有它，所以这是不可能的。

我该如何解决？

非常感谢。

我注意到这是因为＆＃39; a＆＃39;标签后＆＃39; li＆＃39;标签。但我不能删除它。 html页面会自动生成。

CSS：

html{color:#000;background:#FFF;}
body,div,h1,h2,h3,h4,h5,h6,pre,code,form,img{border:0;}
address,caption,cite,code,em,th{font-style:normal;font-weight:bold;}
caption,th{text-align:center;}
h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
/* fonts */
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

 html {background-color: white; 
 scrollbar-shadow-color: white;
scrollbar-highlight-color: white;
scrollbar-face-color: white;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: white;
scrollbar-track-color: white;
scrollbar-arrow-color: white;}
Scrollbar hiding*/
   body { font-family: arial;}
  .familylinks {font-family: arial; padding-top:1.75em;} 
  .tablenoborder { margin: 0.5em;}
  .tablecustom{margin-left:-0.4em;}

  .p ol{margin-top: 0em;}


  ul.simple { list-style-type: none }
  ul { list-style-type: disc; list-style-position: outside; padding-bottom: 0.02em; margin-top:-0.05em;}/*--padding-bottom:0.15 changed to 0.05*/

  ol li { margin-left: -1.05em; padding-bottom: 0.25em;}
  ol li p{margin-top:-0.00005em;}
  li p{margin-top:-0.00005em;padding-top:0em;color:red}
  ol.customlists { margin-top: -0.5em}
  ol.customlists { margin-top: -0.25em}
  ol.h2custom{margin-top: 0.5em}
  ol.olcustom{margin-left:2.6em;}
  ul.ulcustom{margin-left:2.6em}

/* Various basic phrase styles */
  .bold { font-weight: bold; }
  .boldItalic { font-weight: bold; font-style: italic; }
  .italic { font-style: italic; }
  .underlined { text-decoration: underline; }


/* Align images based on @align on topic/image */
  div.imageleft { text-align: left }
  div.imagecenter { text-align: center; margin-top: 1em; margin-bottom: 1em; }
  div.imageright { text-align: right }
  div.imagejustify { text-align: justify }

html文件示例：

<?xml version="1.0" encoding="UTF-8"?>
<html lang="en-us" xml:lang="en-us">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <link rel="stylesheet" type="text/css" href="layout.css"/>
        <title>Numbering &amp; Bullets</title>
        </head>
        <body>
  <h1>Numbering &amp; Bullets</h1>
  <div>
     <div class="p"><strong>Bullets Test</strong>.</div>

     <ul>
        <li><a><!-- --></a>
          <div><p>in paragraph</p></div>
        </li>
        <li><a><!-- --></a>blha blha blha
        </li>
  </div>
</body>
</html>

的问候， RNV

Answer 1

这是由div造成的，这是一个块，因此它希望在内联a之后的新行开始，即使a为空（并且会旧版本已被忽略。

解决方案：将div转换为内联块，使其与a位于同一行中。换句话说，将其添加到您的CSS：

ul a + div {display:inline-block}

请参阅http://jsfiddle.net/MrLister/6RPsN/

修改：或者，如果您的某些a元素确实包含内容，并且确实需要在其后面的div上方放置一行，请将:empty添加到CSS中，以便它可以正常工作仅在没有内容的a上。

ul a:empty + div {display:inline-block}

我不确定这是否适用于IE应该适用的版本;不能在这里测试所有这些。

html css list with＆＃39; p＆＃39;标签问题

1 个答案: