如何防止Symfony探查器的JQueryMobile CSS覆盖样式？

时间：2014-08-13 11:12:36

标签： css symfony jquery-mobile

我正在为我的一些页面使用JQueryMobile。在那些，Symfony探查器的格式几乎搞砸了（关于页面结构和格式的bot）。

有人可以推荐一种同时使用“样式集”（JQueryMobile和Symfony）用于各自相关部分的好方法吗？

以下是我在页面模板中使用的样式，这些样式会导致冲突：

<link rel="stylesheet" type="text/css" href="{{ asset('themes/jquery.mobile-1.4.3.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('themes/jquery.mobile.icons-1.4.3.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('themes/jquery.mobile.structure-1.4.3.min.css') }}" />

以下是“内容”区域的外观： profiler main area

以下是相关的HTML代码：

<div id="content">
  <div id="header" class="clear-fix">
    <h1>
      <img src="..." />
    </h1>
    <div class="search">
      <form method="get" action="http://symfony.com/search" target="_blank">
        <div class="form-row">
        <label for="search-id">
          <img src="..." alt="Search on Symfony website" />
        </label> 
        <input name="q" id="search-id" type="search" placeholder="Search on Symfony website" /> 
        <button type="submit" class="sf-button">
          <span class="border-l">
            <span class="border-r">
              <span class="btn-bg">OK</span>
            </span>
          </span>
        </button></div>
      </form>
    </div>
  </div>
  <div id="main">
    <div class="clear-fix">
      <div id="collector-wrapper">
        <div id="resume">
        <a id="resume-view-all" href="/myapp/web/app_dev.php/_profiler/search?limit=10">View last 10</a> 
        <strong>Profile for:</strong> GET 
        <a href="http://localhost/myapp/web/app_dev.php/m/">http://localhost/myapp/web/app_dev.php/m/</a> 
        <span class="date">
        <em>by ::1</em> at 
        <em>Thu, 14 Aug 2014 13:33:52 +0200</em></span></div>
        <div id="collector-content">
          <script>
[JavaScript code]
</script>
          <h2>Request GET Parameters</h2>
          <p>
            <em>No GET parameters</em>
          </p>
          <h2>Request POST Parameters</h2>
          <p>
            <em>No POST parameters</em>
          </p>
          <h2>Request Attributes</h2>
          <table>
            <thead>
              <tr>
                <th scope="col" style="width: 25%">Key</th>
                <th scope="col" style="width: 75%">Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>_controller</th>
                <td>
                  <pre>
VS\myapp\MobileBundle\Controller\DefaultController::indexAction
</pre>
                </td>
              </tr>
              <tr>
                <th>_route</th>
                <td>
                  <pre>
vs_myapp_mobile_homepage
</pre>
                </td>
              </tr>
              <tr>
                <th>_route_params</th>
                <td>
                  <pre>
[]
</pre>
                </td>
              </tr>
            </tbody>
          </table>
          <h2>Request Cookies</h2>
          <table>
            <thead>
              <tr>
                <th scope="col" style="width: 25%">Key</th>
                <th scope="col" style="width: 75%">Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>PHPSESSID</th>
                <td>
                  <pre>
se77r1p63robo3cijglnctmve7
</pre>
                </td>
              </tr>
            </tbody>
          </table>
          <h2>Request Headers</h2>
          <table>
            <thead>
              <tr>
                <th scope="col" style="width: 25%">Key</th>
                <th scope="col" style="width: 75%">Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>accept</th>
                <td>
                  <pre>
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
</pre>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

这是菜单的屏幕截图，它在页面的最底部呈现为一个列表：profiler menu

源代码：

    <h2>Flashes</h2>
<p>
  <em>No flashes</em>
</p>
<div id="navigation">
  <ul id="menu-profiler">
    <li class="config">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=config">
        <span class="label">
        <span class="icon">
          <img src="..."
          alt="Configuration" />
        </span> 
        <strong>Config</strong></span>
      </a>
    </li>
    <li class="request selected">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=request">
        <span class="label">
        <span class="icon">
          <img src="..."
          alt="Request" />
        </span> 
        <strong>Request</strong></span>
      </a>
    </li>
    <li class="exception">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=exception">
        <span class="label">
        <span class="icon">
          <img src="..."
          alt="Exception" />
        </span> 
        <strong>Exception</strong> </span>
      </a>
    </li>
    <li class="events">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=events">
        <span class="label">
        <span class="icon">
          <img src="..."
          alt="Events" />
        </span> 
        <strong>Events</strong></span>
      </a>
    </li>
    <li class="logger">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=logger">
        <span class="label">
        <span class="icon">
          <img src="..."
          alt="Logger" />
        </span> 
        <strong>Logs</strong></span>
      </a>
    </li>
    <li class="time">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=time">
        <span class="label">
        <span class="icon">
          <img src="..."
          alt="Timeline" />
        </span> 
        <strong>Timeline</strong></span>
      </a>
    </li>
    <li class="router">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=router">
        <span class="label">
        <span class="icon">
          <img src="..."
          alt="Routing" />
        </span> 
        <strong>Routing</strong></span>
      </a>
    </li>
    <li class="form">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=form">
        <span class="label">
        <span class="icon">
          <img src="..."
          alt="" />
        </span> 
        <strong>Forms</strong></span>
      </a>
    </li>
    <li class="security">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=security">
        <span class="label">
        <span class="icon">
          <img src="..."
          alt="" />
        </span> 
        <strong>Security</strong></span>
      </a>
    </li>
    <li class="swiftmailer">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=swiftmailer">
        <span class="label">
        <span class="icon">
          <img src="..." />
        </span> 
        <strong>E-Mails</strong> 
        <span class="count">
          <span>0</span>
        </span></span>
      </a>
    </li>
    <li class="db">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=db">
        <span class="label">
        <span class="icon">
          <img src="..."
          alt="" />
        </span> 
        <strong>Doctrine</strong> 
        <span class="count">
        <span>2</span> 
        <span>3 ms</span></span></span>
      </a>
    </li>
    <li class="block">
      <a href="/myapp/web/app_dev.php/_profiler/f74116?panel=block">
        <span class="label">
        <span class="icon">
          <img src="..."
          alt="" />
        </span> 
        <strong>Blocks</strong> 
        <span class="count">
          <span>0</span>
        </span></span>
      </a>
    </li>
    <li class="minimize">
      <a href="javascript:void(0);" title="Minimize toolbar" onclick="return toggleMenuPanels();">
        <span class="label">
        <span class="icon">
          <img id="minimizePanelIcon"
          src="..."
          alt="" />
        </span> 
        <strong>Minimize</strong></span>
      </a>
    </li>
  </ul>
  <div class="search clearfix" id="searchBar">
    <h3>
    <img style="margin: 0 5px 0 0; vertical-align: middle;" width="16" height="16" alt="Search"
    src="..." />
    Search</h3>
  </div>
</div>

1 个答案:

答案 0 :(得分：0)

你不能一起使用它们，因为jQuery Mobile试图使普通的html适应移动支持。

但是当你想使用symfony profiler时，你可以轻松地注释掉css，这就是我要做的事情：）

相关问题
最新问题