CSS - Anzeige: keine; funktioniert nicht

Question

Ich versuche ein mobiles Stylesheet zu entwickeln und in diesem Stylesheet möchte ich ein bestimmtes div entfernen.

Im HTML-Code des div, ich eine id „tfl“ genannt, wie unten dargestellt:

<div id="tfl" style="display: block; width: 187px; height: 260px; font-family: Verdana, Arial, Helvetica, sans-serif !important; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/widget-panel.gif) #fff no-repeat; font-size: 11px; border: 1px solid #103994; border-radius: 4px; box-shadow: 2px 2px 3px 1px #ccc;"> 
      <div style="display: block; padding: 30px 0 15px 0;"> 
       <h2 style="color: rgb(36, 66, 102); text-align: center; display: block; font-size: 15px; font-family: arial; border: 0; margin-bottom: 1em; margin-top: 0; font-weight: bold !important; background: 0; padding: 0">Journey Planner</h2> 
       <form action="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2" id="jpForm" method="post" target="tfl" style="margin: 5px 0 0 0 !important; padding: 0 !important;"> 
        <input type="hidden" name="language" value="en" /> 
        <!-- in language = english --> 
        <input type="hidden" name="execInst" value="" /><input type="hidden" name="sessionID" value="0" /> 
        <!-- to start a new session on JP the sessionID has to be 0 --> 
        <input type="hidden" name="ptOptionsActive" value="-1" /> 
        <!-- all pt options are active --> 
        <input type="hidden" name="place_origin" value="London" /> 
        <!-- London is a hidden parameter for the origin location --> 
        <input type="hidden" name="place_destination" value="London" /><div style="padding-right: 15px; padding-left: 15px"> 
         <input type="text" name="name_origin" style="width: 155px !important; padding: 1px" value="From" /><select style="width: 155px !important; margin: 0 !important;" name="type_origin"><option value="stop">Station or stop</option> 
          <option value="locator">Postcode</option> 
          <option value="address">Address</option> 
          <option value="poi">Place of interest</option> 
         </select> 
        </div> 
        <div style="margin-top: 10px; margin-bottom: 4px; padding-right: 15px; padding-left: 15px; padding-bottom: 15px; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom;"> 
         <input type="text" name="name_destination" style="width: 100% !important; padding: 1px" value="232 Kingsbury Road (NW9)" /><select style="width: 155px !important; margin-top: 0 !important;" name="type_destination"><option value="stop">Station or stop</option> 
          <option value="locator">Postcode</option> 
          <option value="address" selected="selected">Address</option> 
          <option value="poi">Place of interest</option> 
         </select> 
        </div> 
        <div style="background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom; padding-bottom: 2px; padding-top: 2px; overflow: hidden; margin-bottom: 8px"> 
         <div style="clear: both; background: url(http://www.tfl.gov.uk/tfl-global/images/options-icons.gif) no-repeat 9.5em 0; height: 30px; padding-right: 15px; padding-left: 15px"><a style="text-decoration: none; color: #113B92; font-size: 11px; white-space: nowrap; display: inline-block; padding: 4px 0 5px 0; width: 155px" target="tfl" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&amp;ptOptionsActive=1" onclick="javascript:document.getElementById('jpForm').ptOptionsActive.value='1';document.getElementById('jpForm').execInst.value='readOnly';document.getElementById('jpForm').submit(); return false">More options</a></div> 
        </div> 
        <div style="text-align: center;"> 
         <input type="submit" title="Leave now" value="Leave now" style="border-style: none; background-color: #157DB9; display: inline-block; padding: 4px 11px; color: #fff; text-decoration: none; border-radius: 3px; border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font: bold 13px/1 Arial,Helvetica,sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); line-height: 1;" /> 
        </div> 
       </form> 
      </div> 
     </div> 

Dieser Code ist Minen, da diese einen eingebetteten Code nicht von der Webseite TFL gegeben.

Ich möchte verstecken DIV es für einen mobilen Benutzer freundlicher zu machen, ich habe:

#tfl { 
display: none; 
} 

Dieser Code nicht mich aber nicht funktioniert, und ich auch, bevor es an den entsprechenden Kopf angelegt und das hat nicht funktioniert, wie noch einmal gezeigt:

h3.tfl { 
display: none; 
} 

Was ist das Problem hier? Dieser Code funktionierte auf einer anderen Seite eines zugeordneten Bildes. (Ich kann weder jQuery noch JavaScript (uni assingment bei CSS) verwenden).

Answer 1

entfernen display: block; im div #tfl Stil Eigenschaft

<div id="tfl" style="display: block; width: 187px; height: 260px; 

Inline-Stil haben Vorrang dann CSS-Datei

Answer 2

Versuchen Sie fügen Sie diese zu Ihrer css

#tfl { 
display: none !important; 
} 

Answer 3

Dies liegt daran, die Inline-Stil display:block ist überschreiben Sie Ihr CSS. Sie müssen entweder diesen Inline-Stil entfernen oder Folgendes verwenden:

#tfl { 
    display: none !important; 
} 

Dadurch werden Inline-Stile überschrieben. Beachten Sie, dass die Verwendung von !important im Allgemeinen nicht empfohlen wird, es sei denn, es handelt sich um den letzten Ausweg.

Answer 4

Überprüfen Sie die folgenden HTML-I entfernt Display: Block von Stil

<div id="tfl" style="width: 187px; height: 260px; font-family: Verdana, Arial, Helvetica, sans-serif !important; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/widget-panel.gif) #fff no-repeat; font-size: 11px; border: 1px solid #103994; border-radius: 4px; box-shadow: 2px 2px 3px 1px #ccc;"> 
     <div style="display: block; padding: 30px 0 15px 0;"> 
      <h2 style="color: rgb(36, 66, 102); text-align: center; display: block; font-size: 15px; font-family: arial; border: 0; margin-bottom: 1em; margin-top: 0; font-weight: bold !important; background: 0; padding: 0">Journey Planner</h2> 
      <form action="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2" id="jpForm" method="post" target="tfl" style="margin: 5px 0 0 0 !important; padding: 0 !important;"> 
       <input type="hidden" name="language" value="en" /> 
       <!-- in language = english --> 
       <input type="hidden" name="execInst" value="" /><input type="hidden" name="sessionID" value="0" /> 
       <!-- to start a new session on JP the sessionID has to be 0 --> 
       <input type="hidden" name="ptOptionsActive" value="-1" /> 
       <!-- all pt options are active --> 
       <input type="hidden" name="place_origin" value="London" /> 
       <!-- London is a hidden parameter for the origin location --> 
       <input type="hidden" name="place_destination" value="London" /><div style="padding-right: 15px; padding-left: 15px"> 
        <input type="text" name="name_origin" style="width: 155px !important; padding: 1px" value="From" /><select style="width: 155px !important; margin: 0 !important;" name="type_origin"><option value="stop">Station or stop</option> 
         <option value="locator">Postcode</option> 
         <option value="address">Address</option> 
         <option value="poi">Place of interest</option> 
        </select> 
       </div> 
       <div style="margin-top: 10px; margin-bottom: 4px; padding-right: 15px; padding-left: 15px; padding-bottom: 15px; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom;"> 
        <input type="text" name="name_destination" style="width: 100% !important; padding: 1px" value="232 Kingsbury Road (NW9)" /><select style="width: 155px !important; margin-top: 0 !important;" name="type_destination"><option value="stop">Station or stop</option> 
         <option value="locator">Postcode</option> 
         <option value="address" selected="selected">Address</option> 
         <option value="poi">Place of interest</option> 
        </select> 
       </div> 
       <div style="background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom; padding-bottom: 2px; padding-top: 2px; overflow: hidden; margin-bottom: 8px"> 
        <div style="clear: both; background: url(http://www.tfl.gov.uk/tfl-global/images/options-icons.gif) no-repeat 9.5em 0; height: 30px; padding-right: 15px; padding-left: 15px"><a style="text-decoration: none; color: #113B92; font-size: 11px; white-space: nowrap; display: inline-block; padding: 4px 0 5px 0; width: 155px" target="tfl" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&amp;ptOptionsActive=1" onclick="javascript:document.getElementById('jpForm').ptOptionsActive.value='1';document.getElementById('jpForm').execInst.value='readOnly';document.getElementById('jpForm').submit(); return false">More options</a></div> 
       </div> 
       <div style="text-align: center;"> 
        <input type="submit" title="Leave now" value="Leave now" style="border-style: none; background-color: #157DB9; display: inline-block; padding: 4px 11px; color: #fff; text-decoration: none; border-radius: 3px; border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font: bold 13px/1 Arial,Helvetica,sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); line-height: 1;" /> 
       </div> 
      </form> 
     </div> 
    </div 

Answer 5

In der HTML-Quelle vorgesehen ist, weist das Element #tfl einen Inline-Stil "display: block". Inline-Stil wird immer Sheets Arten außer Kraft setzen ...

Dann Sie einige Optionen haben (während, wie Sie sagen, Sie nicht den HTML-Code ändern können, noch mit Hilfe von JavaScript):

• Kraftanzeige: keine wichtige Regel (nicht empfohlen)
• gab div offscreen mit Thesen Regeln:

#tfl { position: absolute; left: -9999px; }

Answer 6

Ein weiterer Trick ist zu uns e

.class { 
position: absolute; 
visibility:hidden; 
display:none; 
} 

Das ist Ihren Fluss wahrscheinlich nicht vermasseln (weil er es aus der Strömung nimmt) und stellt sicher, dass der Benutzer sie nicht sehen kann, und dann, wenn display:none Werke später daran zu arbeiten werden. Beachten Sie, dass visibility:hidden es möglicherweise nicht von Bildschirmleseprogrammen entfernt.