IE 7 和 8 中的 CSS 倾斜转换

2024-01-18

我有菱形样式的菜单,它使用以下代码。它在 Chrome、firefox、ie9 等中运行良好,但我现在需要在 IE 7 和 8 中运行! :( 有没有办法在这些旧版浏览器上执行此操作?

http://jsfiddle.net/C7e7U/ http://jsfiddle.net/C7e7U/

非常感谢

HTML:

<div id = "menu">
        <ul id="nav">
            <li class="rhombusStart">&nbsp;</li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Home</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Market <br> Update</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Membership</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>FISC Info</span></a>
            </li>
            <li class="rhombusEnd">&nbsp;</li>
        </ul>
    </div>

CSS

/*******************************************
 Menu Styling
*******************************************/
#menu {
    margin: 0 auto;
    padding-left: 2%;
    width: 1024px;
    height: 2.9em;
    position: relative;
    top: 0;
    background-color: rgb(255,194,14);
    border: 1px solid rgb(140,51,61);
}
#nav {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     height:2.9em;
     background-color: rgb(255,194,14);
}

#nav > li {
    float:left;
    position:relative;
}

#nav > li.rhombus {
    float:left;
    position: relative;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(35deg);
    -moz-transform:skew(35deg);
    -ms-transform:skew(35deg);
    -o-transform:skew(35deg);
    transform:skew(35deg);
    border-right: 1px solid rgb(239,89,24);
    border-left: 1px solid rgb(255,244,80);
    background-color: rgb(255,194,14);
    font-family: Georgia;
    color: rgb(131,0,26);
    width: 8em;
    text-align: center;
    height: 2.9em;
}

li.rhombus > a span {
    -webkit-transform:skew(-35deg);
    -moz-transform:skew(-35deg);
    -ms-transform:skew(-35deg);
    -o-transform:skew(-35deg);
    transform:skew(-35deg);
    text-decoration: none;
    vertical-align: middle;
    display: table-cell;     
 }

https://github.com/visionmedia/move.js https://github.com/visionmedia/move.js只需下载并阅读其文档即可在旧浏览器中使用 CSS3

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

IE 7 和 8 中的 CSS 倾斜转换 的相关文章

  • AngularJS 选择元素设置所选索引

    所以我使用的是 Angular 这是我选择的 html
  • 为什么连字符不能与内部 一起使用?

    我正在尝试让连字符处理具有以下内容的文本 span 里面的元素用于突出显示 这似乎打破了连字符算法 有什么方法可以修复这种行为 使连字符的放置方式与没有连字符的位置相同 span 元素 我不是在问像这样的解决方法 shy 代码 沙箱 htt
  • 强制 Flexbox 在特定项目之后换行(方向:列)

    我有导航 各个条目通过 Flexbox 一层一层地显示 方向 列 如果导航条目获得 分隔符 类 则导航应进入下一行 是否可以强制 Flexbox 执行 换行 nav display flex flex direction column na
  • angularjs 自定义过滤器检查数据数组内的值

    我有两个过滤器 它们根据数据中的队列键过滤数据 这是我的代码 var app angular module app app controller mainController function scope Data object scope
  • MVC 5 Razor 活动导航选项卡

    我一直在尝试突出显示我的项目中的活动导航选项卡 我的任务是更新旧网站而不更改为引导程序 这是我的经验所在 我找到了一个包含我需要的大部分内容的示例 目前 唯一具有 选定类别 的选项卡是 主页 选项卡 当我单击另一个选项卡时 主页 选项卡不再
  • 清理 CSS 抖动

    我已经构建了这些圆圈 当鼠标悬停时它们会扩展边框 我现在遇到的唯一问题是有时圆圈会抖动 摇晃 当我设置transition all 1s ease in out 超过 0 2 秒 有解决这个问题的方法吗 还是事情就是这样 这是其中的代码Js
  • 如何从 Firefox 中的选择元素中删除箭头

    我正在尝试设计一个select使用 CSS3 的元素 我在 WebKit Chrome Safari 中得到了我想要的结果 但 Firefox 的表现不佳 我什至不关心 IE 我正在使用 CSS3appearance属性 但由于某种原因我无
  • CSS“概述”Webkit 和 Gecko 上不同的行为行为

    我正在做一个实验 我发现 轮廓 CSS2 属性在 Webkit 和 Gecko 上的实现方式不同 在下面的脚本中 我有一个绝对位置 div 在另一个 div 内 但浮动在其外部 Webkit 上的轮廓概述了实际的父 div 而在 Gecko
  • 如何使页面上的所有内容变大?

    如果我在浏览器中打开我的网站并按Ctrl 有几次 一切都变得更大 网站对我来说看起来更好 我可以通过在 HTML 代码中添加一些内容来实现相同的效果吗 以便用户默认看到更大的所有内容 而无需按Ctrl 我想让所有东西都变大 文本和图像 如果
  • 如何防止在达到一定字符数后向文本区域输入内容?

    使用下面的代码 任何超过指定最大值的输入都将被删除 但这会产生一种效果 即键入字符后立即将其删除 我宁愿简单地阻止输入字符
  • 盒子大小是否可在电子邮件模板中使用

    我正在创建电子邮件模板 我发现了这个CSS 支持指南 https www campaignmonitor com css but box sizing不在那儿 我想知道是否支持该 CSS 属性 如果支持 哪些电子邮件客户端支持它 不 不支持
  • 将一个 div 放置在另一个 div 的底部

    我有外部 div 和内部 div 我需要将内部 div 放在外部 div 的底部 外层div是有弹性的 例如宽度 70 我还需要将内部块居中 所述化妆的简单模型如下图所示 已在 Firefox 3 Chrome 1 和 IE 6 7 和 8
  • CSS - 在 id 中选择类的语法

    通过类名选择 id 中的标签的选择器语法是什么 例如 我需要在下面选择什么才能使内部的 li 变成红色 ul li Level 1 item ul class navigat ul li ul
  • 通过电子邮件发送在 HTML5 画布上创建的图像

    我有一个画布 用户可以通过交互来更改设计 现在 用户完成更改后 可以提交他的设计及其电子邮件 ID 但为了提交设计 我使用以下方法将画布转换为图像http www nihilogic dk labs canvas2image http ww
  • 使图像宽度为父 div 的 100%,但不大于其自身宽度

    我试图让图像 动态放置 对尺寸没有限制 与其父 div 一样宽 但前提是该宽度不比 100 时其自身宽度宽 我已经尝试过这个 但没有成功 img width 100 height auto max width 100 其中许多图像比它们的父
  • Django 1.7:如何使用 html/css 文件作为模板发送电子邮件

    从 Django 1 7 开始 可以send email 使用新参数 html message 不幸的是 没有关于如何使用它的全面指南 新手友好 或者至少我找不到它 我需要使发送的电子邮件变得漂亮 因此 我试图弄清楚如何将我的消息包含到 h
  • html输入数字,min + step,使step忽略min?

    是否有可能使step忽略min属性
  • Windows 上的锯齿字体 - Chrome 和 Safari

    我使用以下代码在网页上使用自定义字体 font face font family HelveticaNeueBold src url fonts HelveticaNeueBold eot src url fonts HelveticaNe
  • JQuery Mobile - 内联显示 HTML 表单

    Goal 在 Jquery Mobile 中的同一行显示文本框和提交按钮 Problem 它们不会显示在同一行 我曾多次尝试在同一行显示文本框和提交按钮 但它从未起作用 这是我的代码和我使用的组合
  • 更改 CSS 样式表的选择器属性

    以下是我们传统上如何更改重复元素的样式 将样式应用到每个元素 function changeStyle selector prop val var elems document querySelectorAll selector Array

随机推荐

  • 打开应用程序 来电或去电断开后

    我正在创建一个应用程序 我可以在其中获取通话历史记录listview 现在我正在尝试的是在任何来电或去电断开后 我想打开它listview 但我不知道我的应用程序没有打开 我的listview任何调用后都不显示页面 以下是我的代码 publ
  • 在 Android 中使用谷歌地图查找最近的餐厅、咖啡店和杂货店

    我正在 android sdk 中工作并使用谷歌地图 api 我想知道是否有任何方法可以从用户当前位置找到最近的餐厅或咖啡店或杂货店 有许多应用程序可用于此目的 但我想编写自己的应用程序以用于学习目的 这可能有帮助 不知道它是否适用于and
  • 处理 SOAP 响应

    我正在尝试处理来自 First Data 的全球网关的 SOAP 响应 我以前使用过 SoapClient 但没有 wsdl 并且该公司表示他们不提供 wsdl 我尝试了各种其他方法 例如基于此处和 PHP 手册中找到的示例的 Simple
  • 在Python中处理多个相同类型的异常并恢复执行

    看来 一旦您在 Python 中引发了用户定义的异常 就无法恢复测试的执行 但在我的场景中 我想检查不同输入值发生的错误 但当前的实现仅限于继续对不同输入向量进行错误检查 然而 在对我的问题提出某种复杂的解决方案之前 我想我应该询问专家 看
  • Robolectric 2.4 创建活动时 NoSuchMethodError 无法转换为 RuntimeException

    我开始在 Android Studio 中使用 Robolectric 起初我想使用 hamcrest 创建一个简单的测试 如下所示 RunWith CustomTestRunner class Config emulateSdk 18 p
  • 如何使WCF命名管道地址等于WinApi地址?

    我注意到WCF的命名管道地址 net pipe localhost mynamedpipe 和 Windows API pipe mynamedpipe 不要碰撞 这是为什么 我怎样才能让它们指向同一个管道 没有记录的方法可以做到这一点 经
  • 字典的匿名集合初始值设定项

    是否可以隐式声明 nextDictionary
  • 如何在 TensorFlow 中打印 Tensor 对象的值?

    我一直在使用 TensorFlow 中矩阵乘法的介绍性示例 matrix1 tf constant 3 3 matrix2 tf constant 2 2 product tf matmul matrix1 matrix2 当我打印产品时
  • 正确 Dafny 方法的 Z3 模型

    对于正确的方法 Z3能否找到该方法验证条件的模型 我原以为不会 但这里有一个例子 该方法是正确的 但验证发现了一个模型 这是 Dafny 1 9 7 的情况 Malte 所说的是正确的 我发现它也得到了很好的解释 Dafny 是健全的 因为
  • 图像属性的值 (C#)

    我正在尝试解决更改 Bitmap 对象的 ImageDescription 值的问题 添加文件的描述 搜索了相关主题 没有找到解决方案 My code public Bitmap ImageWithComment Bitmap image
  • 为什么我的 Cassandra 更新不起作用?

    我有以下 Cassandra 表 create table start stop id text start text end text price double PRIMARY KEY id start 我做了这样的插入 insert i
  • 在nodejs中获取url的响应(express/http)

    我试图在nodejs 中获取两个URL 的响应 但是http request 有问题 这是我到目前为止所拥有的 var url https www google com pretend this exists xml var opt hos
  • 样式组件中的CSS' calc() [重复]

    这个问题在这里已经有答案了 尝试这个 const styledDiv styled div props gt props takeViewportHeight min height calc 100vh 16px 它不起作用 我是否遗漏了样
  • 警告:mysql_query(): 3 不是有效的 MySQL-Link 资源

    我遇到了这个奇怪的错误 但我不知道它来自哪里 Warning mysql query 3 is not a valid MySQL Link resource in 3号怎么了 我不明白 有没有人自己经历过这个错误 PHP 使用资源作为特殊
  • 如何在 Android 模拟器中安装 APK 文件?

    我终于成功混淆了我的 Android 应用程序 现在我想通过安装来测试它APK http en wikipedia org wiki APK 28file format 29文件并在模拟器上运行 如何在 Android 模拟器上安装 APK
  • 无法在 macOS High Sierra 上构建和安装 Valgrind

    我无法在 macOS High Sierra 上安装 Valgrind 无法通过brew 我尝试过3 10 https github com msgpack msgpack c issues 525 After make install 我
  • R语言变量冲突

    我有一个 R 脚本 它采用 R 的其他脚本并以这种方式操作它们 并且还执行它们的代码 我的脚本使用一些变量 显然 当其他脚本使用公共变量名时 我会陷入混乱 我希望我可以像在胶囊中一样执行其他脚本 这样重合的变量就不会互相影响 我一直在阅读有
  • 将冷却/计时器添加到 on_message [Discord.py]

    我最近开始用 Python 制作一个 Discord 机器人 用它测试 Python 的基础 并自己创建了一个带有多个命令的功能机器人 为了扩大其用途 我添加了一个级别 XP 系统 到目前为止该系统正在运行 bot event async
  • Nexus 7 上不显示菜单按钮

    所以我很长时间都面临这个问题 我的 Nexus 4 和 Nexus 7 都运行 Android 4 3 并且我有 targetSdkVersion 11 的应用程序 我使用 11 因为任何低于 11 的目标 sdk 都不支持我的多点触控 问
  • IE 7 和 8 中的 CSS 倾斜转换

    我有菱形样式的菜单 它使用以下代码 它在 Chrome firefox ie9 等中运行良好 但我现在需要在 IE 7 和 8 中运行 有没有办法在这些旧版浏览器上执行此操作 http jsfiddle net C7e7U http jsf