为什么PHP生成的HTML呈现出小故障？

我的问题是php生成的html内容与硬编码内容不同，但它们完全相同。如前所述，此图显示了由函数生成的错误行为

如您所见，选项卡重叠。现在，如果我查看生成的源代码（通过Firefox中的Firebug，或直接在页面源代码中），然后简单地将其手动复制并粘贴到页面中，结果是（所需的）：

Chrome、IE和FF中也出现了同样的结果（都是针对Windows的，但我猜在其他操作系统中也是如此）

这是生成的代码（从生成的源复制/粘贴）：

---

正如评论中已经指出的，原因肯定是php输出中缺少空格和/或换行符。 这很可能会导致CSS中的

：before

和

：after

（speudo-）选择器出现问题，因为它们通常应用于标记之间的字符。

---

如果您只是在结束标记后插入一些空格和/或换行符（例如将

''

更改为

''

或

''.PHP_EOL

），那么问题就不会再出现了。

您是在查看源代码还是“元素检查器”？确保您是在原始源代码级别检查差异，而不是在已处理的DOM级别。还有，还有什么不同吗？特别是HTML doctype声明和/或HTTP头？另外，我们可以看到php中的生成代码吗？用php代码更新了原始帖子。@deceze doctype是HTML5，除了生成的HTML没有缩进之外，我看不到任何不同。谢谢你的提示，我会记住以后的调查。可能不仅仅是缩进，元素之间可能缺少空格，不是吗？这可能会有所不同，这取决于CSS规则以及元素是内联的还是块。我在每个地方都插入了一个空格，

在

之前和

在

打开/关闭标记之后，问题确实解决了。谁会想到。。再次感谢deceze，他给出了正确的答案。谢谢大家。

                 <ul>
                    <li><span data-link="/">Pagina principala</span></li>
                    <li><span data-link="/piscine">Piscine</span>
                        <ul>
                            <li><span data-link="/piscine/piscine-rezidentiale">Piscine rezidentiale</span></li>
                            <li><span data-link="/piscine/piscine-publice">Piscine publice</span></li>
                        </ul>
                    </li>
                    <li><span data-link="/spa">Spa</span></li>
                    <li><span data-link="/saune">Saune</span></li>
                    <li><span data-link="/wellness">Wellness</span>
                        <ul>
                            <li><span data-link="/wellness/sauna">Sauna</span></li>
                            <li><span data-link="/wellness/spa">Spa</span></li>
                            <li><span data-link="/wellness/baia-de-aburi">Baia de aburi</span></li>
                            <li><span data-link="/wellness/infracabine">Infracabine</span></li>
                            <li><span data-link="/wellness/solarii">Solarii</span></li>
                            <li><span data-link="/wellness/dusuri">Dusuri</span></li>
                            <li><span data-link="/wellness/fantana-de-gheata">Fantana de gheata</span></li>
                        </ul>
                    </li>
                    <li><span data-link="/aquaparcuri">Aquaparcuri</span>
                        <ul>
                            <li><span data-link="/aquaparcuri/tobogane">Tobogane</span></li>
                            <li><span data-link="/aquaparcuri/jocuri-acvatice">Jocuri acvatice</span></li>
                            <li><span data-link="/aquaparcuri/tobogane-copii">Tobogane copii</span></li>
                            <li><span data-link="/aquaparcuri/atractii-de-apa">Atractii de apa</span></li>
                        </ul>
                    </li>
                    <li><span data-link="/irigatii">Irigatii</span></li>
                    <li><span data-link="#">Galerie foto</span></li>
                    <li><span data-link="#">Contact</span></li>
                </ul>

function return_middle_menu() {
   $item = '';
   $query = mysql_query("SELECT * FROM `category_top` WHERE `active` = 1 ORDER BY `sort`");
   while($row = mysql_fetch_assoc($query)) {
    $cat_number = $row['id'];
    $sub_menu = return_middle_menu_sub($cat_number);
    if ($sub_menu != '') { $sub_menu = '<ul>'.$sub_menu.'</ul>'; }
    $temp_name = strtolower($row['name']); $temp_name = ucfirst($temp_name);
    $temp_link = $row['page_link'];
    $temp_link = str_replace($row['name'], $temp_name, $temp_link);
    $temp_link = str_replace('<a ', '<span ', $temp_link);
    $temp_link = str_replace('</a>', '</span>', $temp_link);
    $item .= '<li>'.str_replace('href', 'data-link', $temp_link).$sub_menu.'</li>';
}
return $item;
}

function return_middle_menu_sub($cat_number) {
$item = '';
$query = mysql_query("SELECT * FROM `sub_category_top` WHERE `active` = 1 AND `cat_number` = $cat_number ORDER BY `sort`");
$numrows = mysql_num_rows($query);
if ($numrows >= 1) {
    while($row = mysql_fetch_assoc($query)) {
        $temp_name = strtolower($row['name']); $temp_name = ucfirst($temp_name);
        $temp_link = $row['page_link'];
        $temp_link = str_replace($row['name'], $temp_name, $temp_link);
        $temp_link = str_replace('<a ', '<span ', $temp_link);
        $temp_link = str_replace('</a>', '</span>', $temp_link);
        $item .= '<li>'.str_replace('href', 'data-link', $temp_link).'</li>';
    }
}
return $item;
}

    .middle_menu { background: #a29f9f; min-height: 25px; padding: 10px 5px 0; }
    .middle_menu ul {
        text-align: left;
        margin: 0;
        list-style: none;
    }
    .middle_menu ul li {
        font-family: 'SegoeUI-SemiBold', Segoe UI, 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #00334d;
        display: inline-block;
        margin-right: -2px;
        position: relative;
        padding: 7px 30px 7px 39px;
        background-color: #ffffff;
        cursor: pointer;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
    .middle_menu > ul > li {
        background-image: url(../img/menu_triangle.png), -ms-linear-gradient(top, #E6E6E6 0%, #FEFEFE 100%);
        background-image: url(../img/menu_triangle.png), -moz-linear-gradient(top, #E6E6E6 0%, #FEFEFE 100%);
        background-image: url(../img/menu_triangle.png), -o-linear-gradient(top, #E6E6E6 0%, #FEFEFE 100%);
        background-image: url(../img/menu_triangle.png), -webkit-gradient(linear, left top, left bottom, color-stop(0, #E6E6E6), color-stop(1, #FEFEFE));
        background-image: url(../img/menu_triangle.png), -webkit-linear-gradient(top, #E6E6E6 0%, #FEFEFE 100%);
        background-image: url(../img/menu_triangle.png), linear-gradient(to bottom, #E6E6E6 0%, #FEFEFE 100%);
        -webkit-border-top-left-radius: 5px !important; -webkit-border-top-right-radius: 5px !important; -moz-border-radius-topleft: 5px !important; -moz-border-radius-topright: 5px !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important;
        background-repeat: no-repeat, repeat-y;
        background-position: 13px center, top left;
    }
    .middle_menu ul li:hover {
        background: #555;
        color: #fff;
    }
    .middle_menu ul li ul {
        padding: 0;
        position: absolute;
        top: 36px;
        left: 0;
        width: 200px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        display: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s;
    }
    .middle_menu ul li ul li {
        background: #555;
        display: block;
        color: #fff;
        text-shadow: 0 -1px 0 #000;
        padding: 7px 10px;
    }
    .middle_menu ul li ul li:hover { background: #666; }
    .middle_menu ul li ul li a:hover { background: #666; }
    .middle_menu ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
        z-index: 9;
    }