Sometimes you want to enable IE only stylesheets for Magento. The problem is that the documentation to accomplish this is somewhat lacking. I decided to shed some light on a solution to help you out on your journey to success. It’s a simple solution for IE 6, 7, 8 and 9! In order to understand these methods, you’re going to need to understand CSS Conditional Statements in addition to Magento Layouts.
IE 7 and Below
If you look within the default layout file (design/frontend/base/default/layout/page.xml), you’ll notice that Magento already provides an example of how to recognize IE 7 and below and execute the css/styles-ie.css upon success. If you look around line 55 of the page.xml, you’ll notice a line that looks like this:
PS. I broke it up into multiple lines so that it’s more readable.
<action method="addItem"> <type>skin_css</type> <name>css/styles-ie.css</name> <params/> <if>lte IE 7</if> </action>
Basically, all it says is that we’re going to add a CSS file (css/styles-ie.css) if the version of IE is less than 8. If you look at line 5 from the code snippet above, you’ll notice our conditional statement that looks for IE. The condition “lt IE 8″ stands for LESS THAN IE 8.
What does this mean? It means that all we’re doing is checking to see if the browser detected is IE7 or older. If it is, include the stylesheet we named (styles-ie.css). If you go back to the CSS Conditional Statements, it will explain the available conditions in more detail.
If we want to add an IE only stylesheet, all we need to do is include the snippet above into our page.xml within the head block. Once you update your page.xml, simply go into the skin/frontend/mytheme/css/ directory and add your styles-ie.css file with all your IE7- styling.
What about IE 8 and 9?
Great! The solution above works for the older versions of IE, but what about IE 8 and 9? Unfortunately, sometimes can be a little tricky when handling multiple versions of stylesheets. We can simply use the above snippet, change the condition for execution, and target another stylesheet for the newer versions of IE. It will look something like this:
<action method="addItem"> <type>skin_css</type> <name>css/styles-ie7-and-up.css</name> <params/> <if>gte IE 8</if> </action>
Boom! We changed our condition to if the browser detected is GREATER THAN IE 7! Now all we need to do is go to our skin/frontend/mytheme/css/ directory and add the styles-ie7-and-up.css file with all your IE7+ styling.
It’s Not Working
Sometimes this solution doesn’t always work for the newer versions of IE and you cant figure out why…Don’t worry, it’s not your fault. Blame Microsoft! If you want to read a little bit more about the problem check out Alan Storm: IE9 fix for Magento.
The solution is simple. Basically we’re going to tell the newer versions of IE (8,9) to function as if they were IE7. Hence, our IE7 stylesheet will be all that we need in order to get the styling we need.
You do this by adding two tags within your HTML tags. The file you need to edit is either in your design/frontend/base/default/template/page/html/head.phtml or within your current template directory if it exists.
Add the following meta tags:
<!-- set cinoatubake ue 8 --> <block type="core/text" name="head.compatibleie8"> <action method="setText"><text><![CDATA[<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />]]> </text></action> </block>
WARNING: It is not recommended to edit the above design/frontend/base/default/template/page/html/head.phtml directly. This is considered a *core* hack if you do. Please read the Intro To Layouts in order to learn out how to make the changes the correct way.
相关推荐
magento数据结构分析 magento数据字典
magento的SMTP插件magento的SMTP插件magento的SMTP插件
magik shoes magento 模板, magento 1.7 模板
深入理解Magento 由精东博客下载下来制作成pdf
Magento 2 is installable only via the command-line interface for an experienced webmaster. Chapter 2, Magento 2 System Tools, explains how to install Magento 2 via the command shell. Magento released ...
Magento插件开发手册 Magento Extension Developers Guide
Athlete Magento主题,兼容Magento 1.9.x, 1.8.x, 1.7.x ,特点:完全自适应(响应式布局),自定义子主题,无限颜色,完全自定义,一键安装演示,小工具化横幅系统,颜色选择,MEGA菜单,多商店支持,自定义产品...
magento2 developers cookbook, magento 开发手册,magento教程
Magento Magento商城 Magento目录结构
Magento 2 Beginners Guide by Gabriel Guarino English | 14 Mar. 2017 | ASIN: B01MS81BQX | 442 Pages | AZW3 | 31.84 MB Key Features Set up and manage your very first online store with a friendly and ...
主要包括的内容有:magento的常用设置、Magento模板制作教程、Magento商城_目录结构说明、Magento中文教程实用文档、常用的xml的文件的作用以及自定义模块的应用
快速在服务器上复制为另一个站,版本用的是magento,php语言
Magento 的配置系统就像是 Magento 的心脏,支撑着 Magento 的运行。这套 配置系统掌管着几乎所有“module/model/class /template/etc”。它把整个 Magento 系统抽象出来,用一个配置文件来描述。这里的“配置文件”...
[Packt Publishing] Magento 扩展开发入门教程 (英文版) [Packt Publishing] Getting Started with Magento Extension Development (E-Book) ☆ 图书概要:☆ Understand Magento extensions, and build your own...
Magento 图片延时加载插件,用来解决网站速度慢或者图片数量多的问题
magento转移服务器magento建立多站点总结
magento用户使用手册
magento插件
redis magento
Magento OneCheckout插件