0

我在这里问了一个关于让 box-shadow 在 IE 上工作的问题。

但事实证明，IE 并不是真正的问题——IE会产生阴影，如下所示：

在此处输入图像描述

上面的尖叫声来自在 localhost 上运行的 Meteor 应用程序；但是，当我尝试在 Sharepoint 站点中（在页面上的内容编辑器 Web 部件上）完成阴影效果时，我没有得到框阴影：

在此处输入图像描述

工作（流星）的CSS是：

#imgPostTravelTop:hover,
#imgPostTravelTopRight:hover,
#imgPostTravelCenter:hover,
#imgPostTravelBottom:hover {
  z-index: 4;
    -moz-box-shadow: 0 0 7px #000;
    -webkit-box-shadow: 0 0 7px #000;
    box-shadow: 0 0 7px #000;

  border: 1px solid gold;
}

因此，在没有任何特定于 IE 的指令的情况下，阴影也可以在 IE 中正常工作！

非工作（Sharepoint 内容编辑器 Web 部件）的 CSS 是：

.finaff-form-help-post-travel-centerimage:hover, 
.finaff-form-help-post-travel-bottomimage:hover {
    z-index: 4;
    -moz-box-shadow: inset 0 0 7px #000;
    -webkit-box-shadow: inset 0 0 7px #000;
    box-shadow: inset 0 0 7px #000;

    border: 1px solid red;
}

注意：我在一堆msdn杂志上发誓，我不久前查了IE版本，是IE8，但我去验证它实际上是IE11！但是，即使在这个相对较新的 IE11 版本中，box-shadowing 还是失败了！

我得到的一个较早的建议是试试这个：

zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, 
    Color=#ff0000);

......但这并没有做任何事情。

我也试过：

-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000)";

最后，我之前的问题（链接到上面）的答案建议：

filter:

progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), progid:DXImageTransform.Microsoft。阴影(color=#aaaaaa,direction=90,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa ,direction=180,strength=10), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength =5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);

但是这些都行不通。为什么阴影在 IE 上适用于本地运行的 Meteor 应用程序，但不适用于 Sharepoint Server 提供的内容编辑器 Web 部件？它们都在“InPrivate”IE 会话的同一个实例上运行。

我在 James Johnson 的回答中发现的一种可能性表明，我的标记中可能有这一行：

<meta http-equiv="X-UA-Compatible" content="IE=8" />

……是问题所在。但是我没有明确添加该行，也不知道它来自哪里，或者，如果我确实知道它来自代码库中的哪里，并且我要删除它，它可能会对 Sharepoint 网站的其他地方造成什么破坏。

作为记录，来自工作 Meteor 应用程序的“查看源代码”完全不同，并且不包含“元”标签。它完全是一种“不同的动物”；对于好奇的人，这里是完整的：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?abd8fa0f9109090b6dfb04ae018ba1e7a90a608e">


<script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.2.0.2%22%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%22wc8xy4j0rurw1r0c6ol%22%2C%22autoupdateVersion%22%3A%22fbf092224f885decf98544f617c037c838bed042%22%2C%22autoupdateVersionRefreshable%22%3A%22d906b78beb8cf4410c06763a9c8286ea8465b975%22%2C%22autoupdateVersionCordova%22%3A%22none%22%7D"));</script>

  <script type="text/javascript" src="/packages/underscore.js?fa590de5090ceb4a42555b48562fd8f8e7035758"></script>
  <script type="text/javascript" src="/packages/meteor.js?9730f4ff059088b3f7f14c0672d155218a1802d4"></script>
  <script type="text/javascript" src="/packages/autopublish.js?c5edcae57ad2cf69f735706476fb86d91c1f1b0e"></script>
  <script type="text/javascript" src="/packages/insecure.js?e7411f6cee07c76688e26c3b20767e857b42ad9f"></script>
  <script type="text/javascript" src="/packages/jquery.js?bd30605bc9f8429d01bae2d29081902d10a6c400"></script>
  <script type="text/javascript" src="/packages/linto_jquery-ui.js?6871fa19c8686253b1f7e0f12dab875122097a7d"></script>
  <script type="text/javascript" src="/packages/standard-minifiers.js?b02a7937678c6058031ee7b2f45b5a617518335d"></script>
  <script type="text/javascript" src="/packages/meteor-base.js?f0836ed3757e6217fff6e2710a1293407a6d9b09"></script>
  <script type="text/javascript" src="/packages/mobile-experience.js?674f55574f9947b91bb5f92f9ea9be098479b649"></script>
  <script type="text/javascript" src="/packages/random.js?d48c6af563fc182146464d0e3935bf1385aafe1e"></script>
  <script type="text/javascript" src="/packages/base64.js?52d94e9ee54ea51e35e9d410040454b9d9f9136a"></script>
  <script type="text/javascript" src="/packages/ejson.js?6b2a6aad82b5a8eb6d5f26975783b243b6df124a"></script>
  <script type="text/javascript" src="/packages/id-map.js?7ca7d36e6fea2952e28bf48090ce1c5c110df912"></script>
  <script type="text/javascript" src="/packages/ordered-dict.js?2628d5d93b3386b11f2d072e1d70ea9644a0652a"></script>
  <script type="text/javascript" src="/packages/tracker.js?7776276660c988c38fed448d8262b925dffb5bc3"></script>
  <script type="text/javascript" src="/packages/mongo-id.js?86be8beb10a566185e04cb56b189a091ab8773c6"></script>
  <script type="text/javascript" src="/packages/diff-sequence.js?693d4e99cb4a8884bd58c0da70e580fcf7fec2f0"></script>
  <script type="text/javascript" src="/packages/geojson-utils.js?83d13d8f6fd1847ed97e71e73e2f55dc9165dadf"></script>
  <script type="text/javascript" src="/packages/minimongo.js?cdf1a26cf7719fa9471a8017c3defd5aea812727"></script>
  <script type="text/javascript" src="/packages/check.js?fc9c23a3200accbea4c234c45664bd38c4ae2713"></script>
  <script type="text/javascript" src="/packages/retry.js?cf00021132d94e73a330886b24df2373a3b209ab"></script>
  <script type="text/javascript" src="/packages/ddp-common.js?23a845a08ff48730e7fbbbe941df509caa6b9b66"></script>
  <script type="text/javascript" src="/packages/reload.js?4afcce286a1d3526c99dff17696bd42e70150db1"></script>
  <script type="text/javascript" src="/packages/ddp-client.js?82da06d8e1ea6342d823b2c5c3be071e96108c70"></script>
  <script type="text/javascript" src="/packages/ddp.js?1c935134013739ed5ece46880dea800b6319bd67"></script>
  <script type="text/javascript" src="/packages/ddp-server.js?1057b33d71942bc01fd0167e2b2a5f49f5545d11"></script>
  <script type="text/javascript" src="/packages/mongo.js?5dcfbae63393ea63b330ea0c46d7b41eb1b4c3ae"></script>
  <script type="text/javascript" src="/packages/blaze-html-templates.js?31453f3129c01ec6fabaa5b791f6572e8c4464a2"></script>
  <script type="text/javascript" src="/packages/reactive-dict.js?e43655c138a9184c40228ef4dd2da3f65f1bd8bb"></script>
  <script type="text/javascript" src="/packages/session.js?0ae88e5e9f7b50b0047ade23a47a1a8dfa5874b9"></script>
  <script type="text/javascript" src="/packages/logging.js?79dea15e9da438bd107b9ff92162c1b189d70e4b"></script>
  <script type="text/javascript" src="/packages/deps.js?a0f1fc18309813a3aac8954f76d0c73e4c5d46f4"></script>
  <script type="text/javascript" src="/packages/htmljs.js?02fcaaa6a72c008a5f618f8ec940eac2d240fc2c"></script>
  <script type="text/javascript" src="/packages/observe-sequence.js?e0b5ec6321580efa20bf31f5a1ae4c52f05f38b5"></script>
  <script type="text/javascript" src="/packages/reactive-var.js?b77e26d789bc6e0859202f67ea0934d68346450a"></script>
  <script type="text/javascript" src="/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8"></script>
  <script type="text/javascript" src="/packages/spacebars.js?3eafdd2d5d5d8f08431aa842df4b5e8142600b17"></script>
  <script type="text/javascript" src="/packages/webapp.js?ba2db8eb3207813c575b828e42663552e89d359e"></script>
  <script type="text/javascript" src="/packages/livedata.js?93f27626c1702ea8af804d6170ffbf8968626718"></script>
  <script type="text/javascript" src="/packages/hot-code-push.js?3916ae26c3ca4928e61dc2da7e7b3f93e4164c0c"></script>
  <script type="text/javascript" src="/packages/templating.js?142b64439619ddabba8ad16a798ed8349de73bae"></script>
  <script type="text/javascript" src="/packages/launch-screen.js?b50bb1bd905d2cc3d6182ee28c096df0cc24a725"></script>
  <script type="text/javascript" src="/packages/ui.js?6aa94fb4743be2472f799f928674607edae2afdf"></script>
  <script type="text/javascript" src="/packages/autoupdate.js?aba61f60d98ac77989b7b8984bb8495824c0dad7"></script>
  <script type="text/javascript" src="/packages/global-imports.js?a379a2c4e2479aebed57fef92a7f3df1f6843cf5"></script>
  <script type="text/javascript" src="/app/template.formhelp.js?b781feeb046b65b092be70ca04fb6d6fe3c9c114"></script>
  <script type="text/javascript" src="/app/formhelp.js?82951332599f48810cba5422fff5616aaf8a201f"></script>



<title>Travel Form Help</title>
</head>
<body>

</body>
</html>

更新

我想知道，因为这似乎是一个 Sharepoint HTML 问题，我将不得不恢复尝试通过 jQuery 解决它，例如在“悬停”事件处理程序切换器（mouseenter、mouseleave）中。我最初是沿着这条路走的，但后来改用更优雅的纯 CSS 方法。像 IE 之类的东西——Web 开发人员工作时间存在的祸根）使优雅更难以实现。

4

1 回答 1

1

SharePoint 2010 告诉 Internet Explorer 在兼容模式下运行，以保留与其各种 ActiveX 控件和 Office 扩展相关的功能。兼容模式在 HTML、CSS 和 ECMAscript 合规性方面基本上等同于 IE8。

如果您愿意，您可以在 SharePoint 使用的母版页中<meta http-equiv="X-UA-Compatible" content="IE=Edge" />的标签之间偷偷摸摸<head></head>（没有前面不是<meta>标签的元素）来告诉 IE11 实际表现得像 IE11，但这可能会失去 SharePoint 功能。

如果您在网站上激活了发布基础结构网站集功能和发布网站功能，则可以更轻松地操作母版页和页面布局。您可以在 SharePoint 网站的母版页库中拥有多个母版页，使您能够拥有一些以 IE8 模式呈现的旧功能页面和一些以边缘模式呈现现代 HTML/CSS 的页面。（我会下载现有母版页的副本，添加或更新元标题标签，然后将其重新上传为新的母版页。）

虽然整个站点的母版页由站点设置（位于 /_layouts/changesitemasterpage.aspx）中的设置确定，但您也可以将母版页引用硬编码到页面布局中。然后您可以使用该页面布局创建一个新页面，它应该呈现为 IE11 而不是 IE8。

编辑：或者是的，您可以改用 jQuery 来解决无法识别 CSS 的问题。请注意，如果你走这条路，你基本上支持 IE8，所以最新版本的 jQuery 可能无法工作（但古老的 1.1 版应该没问题）。

于 2015-10-08T03:24:24.747 回答