doujiu6976 2015-03-24 11:15
浏览 35


My problem is that php generated html content differs from the hard-coded one, while they are absolutely the same. This picture shows the wrong behavior, as said, generated by a function.

enter image description here

As you can see, the tabs are overlapping. Now, if I look at the generated source code (via Firebug in Firefox, or directly in the page source), and simply copy and paste it manually in the page, the result is this (the desired one):

enter image description here

The same result is presented in Chrome, IE and FF (all for Windows, but I guess in other OS is the same as well).

This is the generated code (copy/paste from the generated source):

                    <li><span data-link="/">Pagina principala</span></li>
                    <li><span data-link="/piscine">Piscine</span>
                            <li><span data-link="/piscine/piscine-rezidentiale">Piscine rezidentiale</span></li>
                            <li><span data-link="/piscine/piscine-publice">Piscine publice</span></li>
                    <li><span data-link="/spa">Spa</span></li>
                    <li><span data-link="/saune">Saune</span></li>
                    <li><span data-link="/wellness">Wellness</span>
                            <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>
                    <li><span data-link="/aquaparcuri">Aquaparcuri</span>
                            <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>
                    <li><span data-link="/irigatii">Irigatii</span></li>
                    <li><span data-link="#">Galerie foto</span></li>
                    <li><span data-link="#">Contact</span></li>

No weird characters, no extra characters, no inline style applied. I don't understand this behavior. The css rules are the same. Tried to put the generated html in a temporary db table, then read it from there. Also tried to put into a file, and read it back. The result is the same (as in the first picture) all the time, expect if I manually put that list in the page. Why?

These two functions are generating the the html

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;

And the applied CSS rules are here

    .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;
  • 写回答

1条回答 默认 最新

  • dongqiao8502 2015-03-24 12:04

    Like already stated in the comments, the reason is definitely the lack of whitespaces and/or linebreaks in your php output. Most likely this produces problems in connection with your :before and :after (speudo-)selectors in CSS, since they usually apply to the characters between the tags. If you just insert some whitespaces and/or linebreaks (for example changing the '</li>' to '</li> ' or '</li> ' . PHP_EOL) after the closing tags, the problem shouldn't occur anymore.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?



  • ¥15 为什么apriori的运行时间会比fp growth的运行时间短呢
  • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例
  • ¥40 万年历缺少农历,需要和阳历同时显示
  • ¥250 雷电模拟器内存穿透、寻基址和特征码的教学
  • ¥200 比特币ord程序wallet_constructor.rs文件支持一次性铸造1000个代币,并将它们分配到40个UTXO上(每个UTXO上分配25个代币),并设置找零地址
  • ¥15 关于Java的学习问题
  • ¥15 如何使用chatgpt完成文本分类任务?
  • ¥15 已知速度v关于位置s的等式,怎么转化为已知位置求速度v的等式
  • ¥15 我有个餐饮系统,用wampserver把环境配置好了,但是后端的网页却进去,是为什么,能不能帮远程一下?
  • ¥15 R运行没有名称为"species"的插槽对于此对象类"SDMmodelCV"