Databases
StackOverflow2013
Postsdbo
POrelative font-size of <sub> or <sup> and their descendants in IE
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POrelative font-size of <sub> or <sup> and their descendants in IE
    primarykey
    data
    text
    <p>Trying the "<a href="http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/" rel="nofollow noreferrer">Eric Meyer Reset</a>" I stumbled across an issue concerning the <code>font-size:100%</code> declaration to reset the font size of all suitable elements. <code>font-size:100%</code> means the elements should inherit <code>font-size</code> property of their parent, but this is not the case with the <code>&lt;sub&gt;</code> and <code>&lt;sup&gt;</code> elements and their descendants in IE (tested in 6,7,8 and 9th version).</p> <p>For example (or <a href="http://jsfiddle.net/PGQ48/" rel="nofollow noreferrer">this live example on a playground</a>):</p> <pre><code>// CSS: sup,span {font-size:100%;} // HTML: if you try this in IE, &lt;sup&gt;this text will be smaller &lt;span&gt;and this even more&lt;/span&gt;&lt;/sup&gt; </code></pre> <p>It seems like just another implementation trick, that IE plays on webdesigners, <a href="https://stackoverflow.com/questions/1887666/ie-ignores-font-size-for-html-sub-elements">since this is not the only glitch</a> of these elements. My guess is that IE applies some own hard-wired styling on the <code>&lt;sub&gt;</code> and <code>&lt;sup&gt;</code> elements which makes their content smaller in addition to being sub-/superscripted, but I can't find a way to reset this behaviour, if any exists at all.</p> <p><em>// Please respond directly to this issue, suggestions like "use an UA specific stylesheet" may satisfy your feeling of being helpful, but doesn't satisfy the topic :-) ..EDIT: Ok, this plea has finally turned against me, but I wanted to state at least one answer to this topic here.</em></p> <p><strong>EDIT:</strong> It looks like IE (all versions till IE9) multiplies the font size of the <code>&lt;sub&gt;</code> and <code>&lt;sup&gt;</code> and their descendants with some variable coefficient (sth between <strong>0.6 – 0.8</strong> depending on the font-size).</p> <p><em>The reasoning is following</em>: when a fixed size (e.g. <code>font-size:15px</code>) is set on the <code>&lt;sup&gt;</code> tag and all its descendants, they all have the font size around 10px (≅ <strong>0.7</strong> × 15px). But, when a relative size is being set instead (e.g. <code>font-size:100%</code>), the coefficient effect is propagated from the <code>&lt;sup&gt;</code> element down to its descendants – so 1st-level descendant has the font size around 70% (≅ <strong>0.7</strong> × 100% of its <code>&lt;sup&gt;</code> parent), 2nd-level descendant has the font size around 50% (≅ <strong>0.7</strong> × <strong>0.7</strong> × 100% of its <code>&lt;sup&gt;</code> ancestor) and so on. This propagation breaks when <code>font-size:inherit</code> is used, since it means the element should have exactly the same size as its parent – this works for the descendants of the <code>&lt;sup&gt;</code> element, but the <code>&lt;sup&gt;</code> element itself is still given a smaller font size by IE than its parent element does have.</p> <p>The coefficient theory :-) taking part in IE can be seen on <a href="http://jsfiddle.net/PGQ48/7/" rel="nofollow noreferrer">this example</a>. Also compare this with any of the "standard compliant" browsers.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USAdam
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTDuplicate
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POrelative font-size of <sub> or <sup> and their descendants in IE
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POrelative font-size of <sub> or <sup> and their descendants in IE
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POrelative font-size of <sub> or <sup> and their descendants in IE
      1. USduri
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload