I am trying to add css only for iE 10.
Actually my css is working fine in chrome and firefox. But is creating some problem in IE 10.
I tried this code and made ie10.css but it is not working.
<script>
if (/*#cc_on!#*/false) {
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '<link type="text/css" rel="stylesheet" href="css/ie10.css">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
}
</script>
It is not working. Kindly help.
You can easily track the latest versions of IE (mostly IE 10 and IE 11) using
1. CSS media query hack:
/*
#ie10,11 will only be red in MSIE 10,
both in high contrast (display setting) and default mode
*/
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
//-- Put your IE specific css class here
}
OR
#media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}
Read this
Working Example
2. Browser Detection:
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
3. Using script (NOT Tested):
<script>
/*#cc_on
#if (#_jscript_version == 10)
document.write('<link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
#end
#*/
</script >
Note : I know document.write is considered bad practice.
Conditional comments (ie10 dropped conditional comments):
if you want to load external css file for IE, you can use conditional comments. But as you mentioned in question you wants for IE 10 and ie10 dropped conditional comments.
microsoft drop conditional comments in ie10.
Here is the another tricks which I used in my project, you can replace h1 with your class or own CSS
IE10 Only
http://css-tricks.com/ie-10-specific-styles/
Use this JavaScript:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
Then use this CSS:
html[data-useragent*='MSIE 10.0'] h1 { color: blue; }
Click here for all earlier version for IE
Related
The class is added normally on the element, and in located in the appropriate scss file. It is applied naturally in all browsers (Chrome, Opera, Safari, Firefox, Edge) except IE (I tested only for IE11).
The class just doesn't appear to have any properties initially, in dev tools. But after an action is taken in the page, it is loaded. The problem is that it initially displays the page wrong, and the quick fix that I've applied is not a good one - timeout in js and remove & add class after a very short time. This makes for a glitchy initial experience with that page, in IE.
Has anybody else experienced this?
And if so, do you have a better solution?
Thanks in advance!
// css here
.container {
width: 70%;
margin: 0 auto!important;
#media (max-width: 768px) {
width: 100%;
}
}
////////////////////////////////////////////////
// script here
function ieFixFunction() {
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
document.querySelector(".project-dashboard > div").classList.remove("container");
setTimeout(function () { document.querySelector(".project-dashboard > div").classList.add("container"); }, 0);
}
}
P.S.: I know that using !important is a big no-no
I have div which have id name is #monthlyconfirm_grid. I used that jQuery process to control scroll from gridview but it works only for IE and doesn't work on Chrome and Firefox.
$(document).ready(function () {
var expi = $("#monthlyconfirm_grid").scrollLeft - 2;
var expr = "calc("+ expi +")";
$(".locked").css("left", expr);
});
P.S: I used <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> to work on IE.
Why it doesn't work on chrome and Firefox? How can I solve that?
/* property: calc(expression) */
width: calc(100% - 80px);
Try like this and make sure corresponding parent elements has proper width
I would like to remove the page responsiveness in Bootstrap 3 but only for versions of Internet Explorer. I have reviewed the documentation to remove page responsiveness overall, but can it be device or browser specific?
Quick and dirty javascript solution for IE8 and 9: (assumes grid size ~980)
if ( ( (/msie 8./i).test(navigator.appVersion) || (/msie 9./i).test(navigator.appVersion) ) {
var body = document.querySelector('body');
body.style.minWidth = '980px';
}
You could also accomplish this with CSS if you're setting classes on the <html> tags in IE conditionals.
Assuming <html class="ie8"> for example,
html.ie8 {
min-width : 980px;
}
html.ie8 body {
min-width : 980px;
}
An even more thorough way would be to override the #media calls with your own, targeting the ie html class again, and use css load hierarchy or the odd !important tag to get it done.
For some reason, IE won't execute this script (the 'else' part). I tried almost everything, but I can't manage it working.
$(document).ready(function(){
if (navigator.appName != "Microsoft Internet Explorer") {
$(".f-top").corner("round 10px");
$(".s-top").corner("round 10px");
}
else {
$('.f-top').css('background-image', 'url(../images/block-bg.png)');
}
});
I am assuming you are using jQuery - if so...
Use:
!$.browser.msie
Instead of:
navigator.appName != "Microsoft Internet Explorer"
If you are using jQuery, why don't you use the following?
if ($.browser.msie) {
// do your thing if browser is Internet Explorer
}
else {
// do your thing if browser is not Internet Explorer
}
Not directly answering your question, but it looks like you're trying to use JQuery to hack in rounded corners into your elements.
If you must use JQuery for this, there are plenty of good plugins already available which are better than your solution. Here's one: http://www.jqueryplugins.com/plugin/61/
But frankly, the best way to do rounded corners in IE (all versions) is to forget about using JQuery, and use CSS3Pie instead.
CSS3Pie is a small IE-specific hack which goes in your stylesheet, and makes IE work with the standard border-radius CSS property (which already works in all other browsers).
So all you need to have rounded corners is the following CSS:
#myElement {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(PIE.htc);
}
Very easy, works well, and allows you to use standard CSS for all browsers.
See the examples and documentation on the CSS3Pie website for more details.
How to block text selection without input textarea and select items
i actually have the script that works in IE but not in other browsers, here it is:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
document.onmousedown=click;
function click()
{
if ((event.button==2) || (event.button==3)) { alert("Yazı Kopyalayamazsınız!");}
}
i need to work it the same way in other browsers, there must be a ready script, just couldnt find in net..
<div onmousedown='return false;' onselectstart='return false;'></div>
onmousedown disables the selection for Firefox, Safari, Opera, Chrome and most other web browsers, onselectstart for IE.
Though disabling text selection and context menus is very bad style and does not prevent the pro-users from selecting your text. Simply disabling JavaScript in their browsers enables the selection again.
Updated my answer to be more clear:
browsers can disable selecting using css styles or using special element attribute. This way is better:
no script to support
no fear that user disables script and copies content she needs
elegant solution
Opera and IE ignores such a style, but there is html element attribute unselectable, which denies selecting. Try the following page (I tested in IE8, FF3.6, Safari5, opera11, Chrome8):
<html>
<head>
<style>
.unselectable {
-moz-user-select: none; /* for FireFox */
-webkit-user-select: none; /* for Chrome and Safari */
-khtml-user-select: none; /* probably old webkit browsers, but new support it too */
user-select: none; /* for future CSS3 compliant browsers */
}
</style>
</head>
<body>
<!-- add unselectable class to deny selecting in FF, Chrome, Safari and CSS3 compliant browsers -->
<!-- add unselectable attribute to deny selecting in Opera and IE -->
<div class="unselectable" unselectable="on">test</div>
</body>
</html>
For additional information about it visit this page. Now you can pick best option for you to use/mantain. One more time - this solution does not need javascript at all and should be imho more safe (if you can edit html\css pages and don't need dynamic. otherwise you can try to add css class\element attribute through javascript..)