<meta name="viewport" content="user-scalable=no,"/>
<style type="text/css">
html, *, body, div, table {
-ms-touch-action:none !important;
}
</style>
Above is the markup I have tried to get IE 10 to stop zooming every time the customers press the same place on the page fast. I am using IE 10 on Windows 8. This is the only combination I am concerned with. I have a few questions:
Is there a way to disable double-tap-zoom?
Do I have to use JavaScript?
Do I need reference material?
Is this an IE bug?
This seems to disable the double-tap zoom:
-ms-content-zooming: none;
Related
I have been trying to solve this for 2 hours now but no luck. The less code snippet works fine in all browsers except IE8. I checked IE8 supports :after and :before
I'm using standard IE8 doctype, using HTML5 shiv and also not running this in compatibility mode?
#media print {
.app-header .large-header {
.logo span,
h1,
.action-links {
display: none;
}
.logo:before {
content: url('images/logo.png');
position:absolute;
top:0;
left:0;
width:150px;
height:28px;
}
}
}
UPDATE
Issue is that IE8 doesn't support printing content url. The workaround is to use an image instead.
IE8 does not support media queries this: #media print {} is not supported.
create a separate css for IE8 and in the HTML put a conditional like this:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->
See for yourself https://msdn.microsoft.com/en-us/library/ms530813(v=VS.85).aspx
Dynamic HTML (DHTML) expressions can be used in place of the preceding
value(s). As of Windows Internet Explorer 8, expressions are not
supported in IE8 Standards mode. For more information, see About
Dynamic Properties.
I don't know about your markup but is it an option to remove the background image of the logo and use an actual <img> tag for it?
That way you would not need to change a lot of styles for printing pages. You should also keep in mind that there are a lot of printers out there, which disable background-imagery and background-colors by default!
I'm using Bourbon, which produces the following code.
The problem is that no text is shown in Internet Explorer 11 on Windows 7. It works fine with all the other browsers I've tried (Internet Explorer 11 on Windows 8.1 for example).
The problem is in font-feature-settings: "kern","liga","pnum"; line, generated automatically by Bourbon/Neat I guess.
Should I remove it, or is there a better solution? I really have no clue on what is going on, I was only able to spot the problematic line.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Orbitron', sans-serif;
font-feature-settings: "kern","liga","pnum";
}
</style>
</head>
<body>
Test
</body>
</html>
Try this :
https://jsfiddle.net/aakashshah/sLc2nmnq/2/
Rather than giving font for the whole body, define a class with <div> element and and add it just below the body tag.
See my answer: MSIE 10, web font and font-feature-settings causes invisible text
A bug in Windows 7 is causing text to disappear in IE10 and IE11 when the font-feature-settings css property is used. https://connect.microsoft.com/IE/feedbackdetail/view/831964
I am having some issues with one of my html forms. It looks like because the select drop downs and the input text boxes are not the same size all my controls are misaligned in ie6. You can see that all the controls under selected date get pushed out of alignment more and more as we go down. This does not happen in firefox.
I am using yaml as my css framework and I thought that it would be covered but it doesn't seem to be. Can someone please give me an idea on how to make the controls the same size or give ma an idea on an alternative fix.
I've put the html for the form here.... http://pastebin.com/cVrVadQf
thanks
To fix this I just piggy backed onto yaml conditional css foe ie6. I added my own stylesheet as you can see below...
<!--[if lte IE 7]>
<link href="resources/css/custom-myer-ie6.css" rel="stylesheet" type="text/css" />
<link href="resources/css/yaml/yaml/core/iehacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
Then added some simple styling to make sure alignment was ok...
.ym-form .ym-fbox-select select#businessDateFilterType,
.ym-form .ym-fbox-select select#exceptionFilterType {
margin:2px !important;
}
.ym-form .ym-fbox-select select#registerFilterType,
.ym-form .ym-fbox-select select#teamMemberFilterType {
margin:4px !important;
}
.ym-form fieldset.border {
border: none !important;
}
Changing the font size with CSS is just not working in IE9. The font will change but the font size will not.
It works perfectly in chrome and firefox.
I tried to use em,pt instead of px. i tried font-size:40px. i tried everything.
The font size will just not change.
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
body{
font: 40px Arial;
}
</style>
</head>
<body>
font size test
</body>
</html>
I think your CSS is overridden with you browser settings. Check the accessibility settings of the browser.
body {
font-size: 40px;
font-family: Arial;
}
If you have tested this with the exact document you posted, then apparently your IE 9 is broken. Re-install it. Otherwise, please post a complete example code or a URL that demonstrates the problem.
Make sure your zoom in IE9 is set to 100%. To do this, Hit CTRL + 0 while in the browser.
Make another CSS definition is not overriding your font-size statement. You can even force the font size by using the !important attribute like this:
body {
font-size: 40px !important;
}
Make sure you are clearing your cache when you refresh the page. To do a cache-free reload of a page, Hit CTRL + F5 in your browser. This will flush the cache and reload the page completely.
As far as the code you posted, I copy/pasted it as is and it works as intended in IE9. You may want to reinstall IE on your computer if you still can't get it working.
Yup, you just read that.
My Googling gave me tons of results where people wanted a transparent background, and it appeared white.
Today, I stumbled upon the opposite ! It seems to be a real bug since I was able to reproduce it in a JSFiddle : http://jsfiddle.net/qtByH/
The background-color is set to red by default, and everything works fine. If you change it to white and re-run the fiddle (using IE7, of course), the background remains transparent when you hover the link.
Any thoughts ?
Edit : here is the code in case the fiddle vanishes away.
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Test
</body>
</html>
CSS :
body { background-color: green; }
a:hover { background-color: red; }
Well, you have an HTML document inside another HTML document, which probably makes the browser revert to quirks mode. The JsFiddle site already adds a document around the HTML code, so you should not enter a complete HTML document.
http://jsfiddle.net/Guffa/qtByH/3/
Do you have a chroma filter somewhere?
filter: Chroma(color='#ffffff');
or
filter:progid:DXImageTransform.Microsoft.Chroma(color='#ffffff');
or something like that?
A chroma filter set's a color to be transparent.
http://msdn.microsoft.com/en-us/library/ms532982(v=vs.85).aspx
See the fiddle without unnecessary html code and demo for output:
Fiddle: http://jsfiddle.net/qtByH/5/
Demo: http://jsfiddle.net/qtByH/4/embedded/result/
As pointed out in my comment, zoom: 1; was the way to go (must have been yet another hasLayout issue).