为什么 CSS box-shadowing 在 IE11 中可以在 Meteor 应用程序上运行，但不能在 Sharepoint CEWP 上运行？

Question

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

不过，事实证明，IE 并不是真正的问题 -- IE 可以产生阴影，如下所示：

上面的尖叫声来自本地主机上的 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-specific 指令的情况下在 IE 中正常工作！

non-working（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(颜色=#aaaaaa,方向=0,强度=5), progid:DXImageTransform.Microsoft.Shadow(颜色=#aaaaaa,方向=45,强度=2), progid:DXImageTransform.Microsoft.Shadow(颜色=#aaaaaa,方向=90,强度=5), progid:DXImageTransform.Microsoft.Shadow(颜色=#aaaaaa,方向=135,强度=5), progid:DXImageTransform.Microsoft.Shadow(颜色=#aaaaaa,方向=180,强度=10), progid:DXImageTransform.Microsoft.Shadow(颜色=#aaaaaa,方向=225,强度=5), progid:DXImageTransform.Microsoft.Shadow(颜色=#aaaaaa,方向=270,强度=5), progid:DXImageTransform.Microsoft.Shadow(颜色=#aaaaaa,方向=315,强度=2);

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

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

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

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

郑重声明，工作中的 Meteor 应用程序中的 "View Source" 有很大的不同，并且不包含 "meta" 标签。一共是"different animal"；这里是完整的，对于好奇的人：

<!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 解决它，例如在 "hover" 中事件处理程序切换器（mouseenter、mouseleave）。我最初是走那条路的，但后来改用更优雅的 CSS-only 方法。诸如 IE - Web 开发人员工作时间存在的祸根）让优雅更难实现。

Answer 1

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

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

如果您有发布基础设施网站 collection 功能并且在您的网站上激活了发布网站功能，则可以更轻松地操作母版页和页面布局。您可以在 SharePoint 网站的母版页库中拥有多个母版页，使您能够让一些页面以 IE8 模式呈现以实现旧版功能，而一些页面以边缘模式呈现以实现现代 HTML/CSS。（我会下载现有母版页的副本，添加或更新元 header 标记，然后 re-upload 将其作为新母版页。）

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

编辑：或者是的，您可以使用 jQuery 来解决 CSS 未被识别的问题。请注意，如果您走这条路，您实际上是在支持 IE8，因此最新版本的 jQuery 可能无法运行（但古老的 1.1 版本应该没问题）。

为什么 CSS box-shadowing 在 IE11 中可以在 Meteor 应用程序上运行，但不能在 Sharepoint CEWP 上运行？

Why does the CSS box-shadowing work in IE11 on a Meteor app, but not on a Sharepoint CEWP?

sharepoint-2010

internet-explorer-11

ie8-compatibility-mode

box-shadow

content-editor

更新