Given the following css code, the text (arrow) is vertically centered in Chrome while not in IE11, could someone tell me why and how can I achieve the same effects in IE11?
span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
background: blue;
color: white;
font-size: 2rem;
}
<span>⇑</span>
Screenshots:
Chrome:
IE11:
By default, the computed font-family is Times New Roman as the inspect view shows:
However, looking through the supported unicode characters by the Times New Roman font, we find ⇑ (U+21D1)is not supported by Times New Roman. In this case, browser is free to choose which font to use, and we have no idea how the characters would be aligned (since we don't know which fallback font the browser has chosen to use internally), that causes the behavior varies from browsers.
So how to make it vertically centered? One simple method would be explicitly specifying a font-family which contains ⇑ (U+21D1), for example, Cambria
span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
background: blue;
color: white;
font-size: 2rem;
font-family: Cambria;
}
<span>⇑</span>
Related
I have a problem, the following text works when I created it in my windows computer, but when we test run it the text stays the same in windows computer, but when the website opens in safari the text is cut of how do I fix this?
The mobile works fine, it's just the desktop.
Here is the CSS Code for the text:
.header{
text-align: left;
font-size: 55px;
font-weight: bold;
font-style: italic;
height: 100%;
width: 80%;
color: #006400;
border-radius: 5px;
margin-left: auto;
margin-right: 75%;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif,cursive;
}
Tried checking the CSS but not sure what the problem is.
I see you're missing line-height in that CSS block, try defining that first.
If that doesn't work, I recommend looking at this thread, there are a bunch of different solutions here. Font Rendering / Line-Height Issue on Mac/PC (outside of element)
The following element:
<span>Test</span>
span {
font-family: Verdana;
font-size: 16px;
font-weight: bold;
line-height: 1.15;
}
Has a height of 19px in Chrome, and 21px in Firefox (fiddle). I tried applying all sorts of CSS resets/normalization, the height is still different. The text itself is rendered identically, but the element height is off by 2 pixels, which breaks my layout.
Any way to fix it without using (inline) block elements?
Use this :
span {
font-family: Verdana;
font-size: 16px;
font-weight: bold;
line-height: 1.15;
display: inline-block;
}
The difference is due to different render of fonts in browsers.
This is a well known problem. It is caused by the fact that Firefox and Chrome use different rendering engines, Gecko and Webkit respectively.
Unfortunately there is no 'best' way to fix it.
You can find a few workarounds in this answer and this one.
Because of span is inline element, you should re-write your code like following way:
document.querySelectorAll("span").forEach(el => {
el.textContent = el.offsetHeight + "px";
});
span {
font-family: Verdana;
font-size: 16px;
font-weight: bold;
line-height: 1.15;
display: inline-block; /* Key line */
vertical-align: top; /* It is recommended when using "display: inline-block"*/
}
<span>Test</span>
The reason for that behaviour is that you are using a span which is an inline element. It does not change its container height based on the line height but based on its parent block element. Apparently, Chrome and Firefox have different default styles for that.
Either make the span a block element using display: block or replace it with a block element like div.
About the height differences the issue is that you have added font-size, family and line-height as well.
So because of this 3 things :
font-family: Verdana;
font-weight: bold;
line-height: 1.15;
your size of text getting bigger then 16px.
Check this Jsfiddle first.
Here my <input> with has a height of 10px; has given a padding of 10px;, I know it is not a right way of giving style. But still, it's working perfectly in Chrome, IE and Safari but it is an another story when it came to Firefox it crops my placeholder.why.?
I know different browsers have their different rendering methods but can anyone point me the exact reason behind this and is there a way I can solve this without changing the height, padding or font size(it should not be less than 14px).?
Please check if it works for you
input {
padding: 10px;
font-size: 14px;
font-weight: normal;
width: 100%;
line-height: 18px;
height: auto;
}
They count height and padding differently, try this.
Use only height or only padding. Here I add height and only x padding
input {
font-size: 14px;
font-weight: normal;
width: 100%;
height: 30px;
padding: 0 10px;
}
<div style="position: relative; left: 30px; top: 20px; width: 200px; height: 30px; border: solid 1px black; text-align: center; vertical-align: middle; line-height: 30px; text-transform: full-width;">
<span style="color: #999999; font-family: tahoma; font-size: 12px; text-transform: full-width;" onmouseover="this.style.color='#000000';" onmouseout="this.style.color='#999999';">Example Text</span></div>
http://jsfiddle.net/CQwbQ/
So I have some text inside of div, and I've noticed that text-transform doesn't have effect in Opera (it works normally in Firefox). I have the latest Opera version.
I tried all combinations - putting text-transform: full-width; in span, than in div, than in both...
How can this be fixed?
The text-transform value of full-width is currently supported by Firefox only. You could submit a bug report to Opera, but since the value is defined in a Working Draft level document only (CSS Text Module Level 3), I don’t think it would get much attention.
Workarounds:
1) Add a piece of JavaScript code that replaces ASCII characters by corresponding fullwidth characters (e.g., “A” by U+FF21) in applicable parts of the content.
2) Do the same replacement server-side or with preprocessing. More robust.
I've encountered an oddity.
On one of our QA tester's boxes, there is an HTML check box that displays very large under Firefox and Chrome, but in IE, it shows up in its default size. On my box and others, the checkbox displays as is typical.
Are there any Windows desktop display settings that would affect the size that checkboxes are rendered in Firefox and Chrome? Is there anything in CSS to beware of?
Here's the combined CSS that affects the control:
various selectors {
display: inline;
margin-top: -1px;
width: 20px;
font-family: Verdana, Helvetica, Sans-Serif;
font-size: 10pt;
height: 22px;
line-height: 20px;
border: 1px solid #6d6d6d;
padding-left: 3px;
padding-top: 3px;
vertical-align: middle;
}
More simply put, avoid using pt units in CSS, as they may be interpreted differently. Stick to using px units for as much as you can. So for various selectors, set font-size: 10px;
Does the QA test box machine have the font set to a different default size in the browser? Set the font size in Pixels of the checkbox to confirm.