Question

我很困惑，尝试使用HTML5 / CSS3构建一个菜单，以找到Chrome / IE / Safari显示页面和Firefox之间的重大差异。有人可以暗示可能会发生什么吗？

HTML：

<script>
function getFunction(str)
{
var thought = jQuery("textarea#recemail").val();
var getemail = "NULL";
<?php 
$phpvar='"+str+"';
$txtcont = '"+thought+"';                 
$ppwp = $phpvar;
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$usern = $_SESSION['login_user'];
$sql2 = "select GROUP_CONCAT(email SEPARATOR ',') allemail from contacts,groups where groups.grpname=contacts.grp and contacts.user='".$usern."' and contacts.level=2 and groups.ID='".$ppwp."';";
$retval2 = mysqli_query($con,$sql2);
$row2 = mysqli_fetch_array($retval2);
$row_cnt = mysqli_num_rows($retval2);
if($row_cnt > 0) {
$getemail = $row2['allemail'];
echo 'var getemail = "'.$getemail.'";';
}
?>
return getFunction2(getemail);
}
function getFunction2(getemail)
{
var thought = jQuery("textarea#recemail").val();
document.getElementById("recemail").innerHTML= thought+getemail+",";
}</script>

CSS：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Formatting words and paragraphs</title>
  <link rel="stylesheet" href="css/wordplay.css" type="text/css" media="screen" />
</head>
<body>

<div class="nav">
<ul>
<li><div class="menu_item">Forth</div></li>
<li><div class="menu_item">grass</div></li>
<li><div class="menu_item">have</div></li>
<li><div class="menu_item">you'll</div></li>
<li><div class="menu_item">subdue</div></li>
<li><div class="menu_item">brought</div></li>
<li><div class="menu_item">called</div></li>
<li><div class="menu_item">dominion</div></li>
<li><div class="menu_item">form</div></li>
<li><div class="menu_item">above</div></li>
</ul>
</div>

<section>

</section>

</body>
</html>

Chrome / IE / Safari中会产生什么结果：

The menu is formatted horizontally as a normal menu would be

在Firefox中：

The menu is formatted vertically, each menu item takes the whole width

有人可以告诉我我做错了吗？

Answer 1

这个问题解决了这个问题：

.nav ul li::after {
  content: ' '; height: 25px; display: block; float: left; width: 1px;
  border-right: 1px solid gray;
  margin: -27px 0 0 0;
}

Firefox与Chrome中的HTML页面呈现问题：Firefox失败了？

1 个答案: